IB Ridi 



E 



ROGRAMMO 



LA GUIDA PER PORTARE FACILMENTE 
LE TUE APPLICAZIONI NEL MONDO DEL WEB 2.0 



PROGRAMMARE 



AIAX 



Francesco Smelzo 




Sili 



EDIZIONI 

MASTER 



libri di 



/ftRoGRAMMO 



PROGRAMMARE 
CON 

AJAX 



Francesco Smelzo 



gin 



EDIZIONI 



MASTER 



Indice 



ROGRAMVIARE CON 

AJAX 



INDICE 

Cos'è Ajax 

1.1 flusso tradizionale delle applicazioni Web 7 

1.2 Perchè Ajax è una novità? 8 

1.2.1 Nuove applicazioni "di massa" sul Web 9 

1.2.2 pproccio allo sviluppo Web da parte dei programmatori . .10 

1.3 Lo scopo del libro 12 

1.4 Conoscenze richieste 13 

Dotti HTML 

2.1 ed il Dom? 18 

2.2 Trovare gli elementi 21 

2.3 Trovare e impostare gli attributi 23 

2.4 Creare e rimuovere i nodi 25 

2.5 M anipolazione di tabelle 30 

2.6 Gli eventi 34 

2.7 Associazione di eventi con il DOM 35 

2.8 Mettiamo tutto insieme 41 

Uno sguardo a XML 

3.1 II DOM XML 51 

3.2 DOM XML e Javascript 55 

3.3 XPath 61 

3.4 XPath e javascrìpt 64 

3.5 XM LHttpRequest 66 

3.6 XM LHttpRequest e javascript 71 

3.7 Una libreria javascript per DOM , XPath, XM LHttpRequest 74 

3.8 Cos'è una libreria javascript? 74 

3.9 Cercasi libreria javascript per XM L 76 

3.10 Mettiamo tutto insieme 86 



I libri di ioPROGRAMMo/Programmare con Ajax 



3 



PROGRAMMARE CON 

AJAX 



Indice 



Lato server 

4.1 II problema 90 

4.2 Facciamolo in PHP 90 

4.3 Facciamolo in classicASP 97 

4.4 Facciamolo in ASP.NET con C# 102 

4.5 E se preferiamo VB 107 

4.6 Facciamolo con un Web Service .NET con VB 110 

Finalmente AJAX 

5.1 II problema 117 

5.2 Soluzione 117 

5.3 Persistenza delle informazioni 127 

5.4 Noscript 132 

5.5 Altri modi di approccio ad AJAX - ASP.NET AJAX 132 

5.6JSON il "cugino" di AJAX 136 

Ajax on the road 

6.1 Un carrello interattivo 141 

6.2 Lato server 147 

Considerazioni finali e riferimenti 

7.1 AJAX dove, quando e perchè 151 

7.2 In quali applicazioni usareAJAX 151 

7.3 AJAX e i motori di ricerca 152 

7.4 1 tools 152 

7.5 Riferimenti 153 



4 



I libri di ioPROGRAMMo/Programmare con Ajax 



Capitolo 1 



Cos'è AJAX 



COS'È AJAX 

Quando in programmazione si incontrano delle cose semplici e che 
funzionano, il riflesso incondizionato della comunità degli sviluppa- 
tori è di renderle complicate e quello delle multinazionali del softwa- 
re di farci anche qualche affare. 

La prima cosa da sottolineare è cheAJAX MOMè un nuovo linguag- 
gio di programmazione, ma piuttosto l'utilizzo di un insieme di tec- 
nologie già esistenti. 

Da una parte infatti c'è stata l'evoluzione dell'HIMLche, con il sup- 
porto dei browser sempre più moderni, mette a disposizione un Mo- 
dello ad Oggetti (DOM - Document Object M odel) che può essere mo- 
dificato, anche dopo che una pagina è stata caricata nel browser 
con Javascript tant'è che già dalla versione 4 di internet explorer 
(1997) si parlava di DHTM L ( HTM L dinamico). 
Poi abbiamo avuto il "ciclone" di )BML(1998) che è diventato lo 
strumento per eccellenza perii trasporto dei dati nella programma- 
zione moderna. 

Per questo insieme di tecnologie (DHTM L.Javascript e XML) , nel 
febbraio 2005, il consulente] esse James Garrett coniò (pare sotto la 
doccia) il termine di AJAX, che a noi italiani ricorda un detersivo ma 
in realtà è un acronimo per Asyndvonous JavaScript aridi XML 
ovvero XM L utilizzato da Javascript in modo asincrono (tecnica che, 
come abbiamo visto, si poteva usare - e si è usata - ben prima del 
2005). 



1.1 FLUSSO TRADIZIONALE 
DELLE APPLICAZIONI WEB 

Il flusso delle applicazioni Web è tradizionalmente: 

1. il client richiede una certa pagina al server 

2. il server elabora la richiesta e la rinvia al client 

Questo significa che i " giochi" sì fanno tra la richiesta (Request) eia 
risposta (Response), infatti tutti i vari linguaggi lato server (ASP, PHP, 
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JSP ecc. ) non fanno altro che inserire delle istruzioni per l'elabora- 
zione dell'output (la pagina Web) tra la Request e la Response. 
In un meccanismo di questo tipo ogni aggiornamento dei dati pre- 
sentati richiederà una nuova Request con il conseguente ricarica- 
mento (e rielaborazione da parte del server) di tutta la pagina. 
Pensiamo al semplice caso di una pagina web contenente una ma- 
schera per l'inserimento dei dati. Per verificare la correttezza dei da- 
ti inseriti, con la tecnica tradizionale, occorre inviarli al server dove ci 
sarà del codice che ne validerà la correttezza e, in caso di problemi, 
ricostruirà l'intera pagina indicando all'utente dove ha sbagliato. 
Per mitigare il consumo di risorse in termini di banda e di CPU del ser- 
ver si ricorre di solito a script nella pagina web che controllino i da- 
ti in fase di invio. M a anche questa tecnica ha le sue limitazioni, in- 
fatti è possibile controllare se un campo è vuoto o una data è sba- 
gliata, ma non se, ad esempio, un ordine supera la quantità di mer- 
ce in magazzino o se una password è già esistente nel sistema, sem- 
plicemente perché questi dati li ha il servere non il client. 
L'insieme delle tecnologie AJAX invece consente di risolvere brillan- 
temente il problema. Si carica normalmente la pagina con la ma- 
schera in questione dove sarà presente uno script che, senza ricari- 
care la pagina, avvia in background un dialogo con il server per ve- 
rificare la correttezza dei dati che l'utente sta inserendo avverten- 
dolo in tempo reale di un eventuale erro re. Tutto questo senza biso- 
gno di ricaricare tutto daccapo. 

1.2 PERCHÉ AJAX È UNA NOVITÀ? 

Come abbiamo visto gli strumenti per scrivere codice AJAX quando 

... "AJAX non c'era" c'erano già da tempo e possiamo anche dire 

(per averlo fatto) che venivano pure utilizzati. 

Allora perché questa improvvisa ventata di interesse verso questa 

tecnologia? 

Lasciando perdere il fattore" moda" (che comunque ha la sua impor- 
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tanza), diciamo che la "novità" di AJAX è in gran parte dovuta a 
due fattori: 

1. Nuove applicazioni "di massa" sul web 

2. Approccio allo sviluppo Web da parte dei programmatori 

1.2.1 Nuove applicazioni "di massa" sul 
web 

Le tecnologie su cui si basa AJAX anche se presenti da tempo veni- 
vano utilizzate soprattutto in ambito Intranet oppure in partì di siti 
web riservate a comunità ben definite, questo perché AJAX è una 
tecnologia fortemente basata sul browser, il quale deve avere: 

1. supporto di Javascript 

2. supporto al DOM HTML 

3. strumenti perii parsingXML 

tali caratteristiche, qualche anno fa, non erano per niente scontate 
nei browser in circolazione, soprattutto in piattaforme non Windows. 
Il rischio di usareAJAX in un sito pubblico era quindi quello di taglia- 
re fuori una fetta significativa di utenti. Per questo si preferiva utiliz- 
zare tale tecnica solamente quando si poteva "controllare" e indi- 
rizzare all'uso di un certo browser la comunità degli utenti. 
Successivamente, soprattutto grazie a browser come Firefox, si è po- 
tuto disporre di una base di browser installati (Internet Explorer e 
Firefox da soli coprono la stragrande maggioranza dei browser uti- 
lizzati) predisposta versoAJAX. 

Si è quindi incominciato ad usare tale tecnologia anche da parte in 
siti web di riferimento come, ad esempio, Google. 
Proprio a Google si deve infatti una delle prime applicazioni AJAX " pub- 
bliche", ovvero Google Suggest (http://www.google.com/webhp7com- 
plete=l&hl=en ). 

In questa applicazione, come vediamo in figura 1, man mano che 
l'utente digita la parola da cercare nella textbox viene mostrata una 
lista aggiornata delle combinazioni di parole maggiormente utilizza- 
te dagli utenti. 
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figura Li: Ricerca con Google Suggest 



Questa ed altre applicazioni del genere, hanno portato una gran 
massa di sviluppatori in contatto con le possibilità offerte da AJAX 
ed hanno contribuito in gran parte ad accrescere l'interesse verso 
di esso. 

1.2.2 Approccio allo sviluppo 
Web da parte dei programmatori 

Tuttavia nel far vedere AJAX come un fenomeno nuovo ha inciso 
anche un altro, non secondario fattore. 
Com'è che si arriva a diventare sviluppatori Web? Beh, solitamente 
ci sono due "canali" : 

1. il web-designer che dopo aver giocato in tutti i modi 
possibili con l'HTM L si accorge che questo, da solo, non 
basta ed inizia ad esplorare un linguaggio di scripting e poi 
magari una tecnologia "lato server" come ASP,PHP,JSP 
ecc.. 

2. il programmatore di applicazioni desktop tradizionali (in VB, 
DELPHI, C++ ecc.. ) che pian piano deve, per esigenze di 
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mercato, spostarsi sul web. 
Anche se il punto d'arrivo di queste due "categorie" di sviluppato- 
ri è lo stesso le condizioni di partenza, e quindi il background cultu- 
rale, è ben diverso. 

Il programmatore del secondo tipo non avrà problemi a gestire con- 
nessioni a database, algoritmi sofisticati ecc.. ma resta pratica- 
mente " in panne" quando ha a che fare con il mondo dei TAG, dei 
CSS e degli altri standard del mondo Web. Basti pensare quant'è 
ancor oggi difficile far digerire ad un programmatore tradizionale la 
sintassi, tutto sommato banale, di XM L. 
Naturalmente anche il programmatore del primo tipo avrà le sue la- 
cune, ma sicuramente con la sintassi HTM L e simili si trova molto 
più "a casa sua". 

C'è da dire che delle due tipologie di programmatori Web la secon- 
da è in larghissima parte prevalente, e questo lo sta a dimostrare 
chiaramente l'evoluzione delle varie tecnologie lato server, ASP.NET, 
JSP e da ultimo pare anche PHP. 

Le tecnologie di sviluppo Web di ultima generazione, infatti, tendo- 
no a riprodurre il più fedelmente possibile l'ambiente di sviluppo 
tradizionale. Ecco che si parla quindi di Controlli , di Eventi, di Fine- 
stre ecc.. 

Tutto questo per" nascondere" il più possibile allo sviluppatore le par- 
ticolarità, e le peculiarità dell'ambiente in cui si trova ad operare per 
farlo assomigliare sempre di più ad un normale programma desktop. 
Ecco quindi che ci si "inventa" una miriade di POST nascosti (che 
fanno crescere a dismisura le dimensioni della pagina da scaricare 
sul browser) per conservare lo stato dei controlli e gestire gli even- 
ti. 

Il risultato è che il programmatore perde progressivamente il contat- 
to con l'ambiente in cui opera effettivamente e, pur scrivendo per il 
Web, magari incontra grandissima difficoltà ad inserire un semplice 
script di validazione. 

Allora è chiaro che un programmatore Web di questo tipo che si tro- 
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va davanti una tecnologia tutta incentrata sul Client comeAJAX si 
trova come un pesce fuor d'acqua e comincia a cercare spasmodica- 
mente controlli, tools di generazione automatica o di conversione e 
quant'altro che la fantasia umana può produrre. 

1.3 LO SCOPO DEL LIBRO 

Fatta questa premessa, parliamo di noi. 
Questo libro nasce con il preciso scopo di portare, passo passo, 
il programmatore a riprendere confidenza con l'ambienteWeb. 
Il libro non vuole essere una somma di nozioni (anche se un po' 
di teoria la dovremo per forza illustrare), ma piuttosto vuol par- 
tire da semplici casi pratici per arrivare fino ai primi esempi di 
AJAX. 

Incontreremo quindi diverse tecnologie : il DOM HTM L e CSS, 
XM L e XPATH visti sempre dal punto di vista di Javascript. 
Per lavorare in Javascript con XM L, gestito da molti browser ma 
con modalità radicalmente differenti, vedremo anche alcune li- 
brerie di funzioni che semplificano il lavoro. 
Poi, prima di addentrarci nell'AJAX vero è proprio, ci soffermere- 
mo sul versante server con degli esempi in PHP, C#e VB.NET {i con- 
cetti esposti si possono comunque applicare a qualsiasi linguag- 
gio). 

Non pretendiamo di essere esaustivi su ogni tecnologia trattata 
(altrimenti dovremmo avere a disposizione uno spazio ben mag- 
giore di un istant book), ma di guidare il lettore attraverso gli 
esempi, di stimolarne l'approfondimento e dare degli spunti nel- 
l'ottica di risolvere casi concreti. 

Sempre per esigenze di spazio, e anche per non complicare trop- 
po le cose, nel libro non trattiamo un'altra delle tecnologie XM L 
che può essere utile con AJAX e cioè XSLT (eXtensible StyLesheet 
Tranformations) ovvero la trasformazione diretta di XM L (maga- 
ri in HTM L) nella convinzione che sia più utile dare piuttosto un 
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quadro di riferimenti generali. 

1.4 CONOSCENZE RICHIESTE 

La lettura del libro richiede una conoscenza di base della sintassi Ja- 
vascript acquisibile anche attraverso la lettura di uno dei tanti tuto- 
rial reperibili in rete (sempre ottima la sezione Web Development 
della library di M icrosoft - http://msdn.microsoft.com/library ), pre- 
feribile anche una certa frequentazione di XM L (può essere utile il ma- 
nuale su XM L di loProgrammo uscito di recente) e qualche nozione 
di programmazione lato server. 
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DOMHIML 

HTM L è sostanzialmente un insieme di regole di formattazione 
del testo basato su speciali marcatori, oTAG, che definiscono 
gli elementi da visualizzare. 

Ad esempio, il codice per visualizzare una tabella con una riga 
e due celle sarà: 



<table> <! --inizia tabella --> 
<tr> <! --inizia riga-- > 
<td> <!-prima Cella— > 
Nome <! --testo --> 
</td><!- fine prima Cella— > 
<td><!~ seconda Cella --> 
Cognome <! -testo --> 
</td><!~ fine seconda Cella-- > .3 
</tr> <! --fine riga-> 
</tablex!-fine tabella-> 

Ogni TAG ha poi una serie di proprietà che definiscono lo stile 
di visualizzazione: la larghezza di un elemento, il colore di sfon- 
do ecc.. 

Queste proprietà sono scritte come attributi del TAG, per cui vo- 
lendo dare alla nostra tabella una larghezza di 400 pixel, alla pri- 
ma cella il colore di sfondo grigio e alla seconda giallo potremo 
scrivere: 



<table width="400" > 
<tr> 

<td bgcolor=" #EEEEEE" > 

Nome 
</td> 

<td bgcolor=" #FFFF66" > 
Cognome 
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</td> 
</tr> 
</table> 

L'attributo è espresso all'interno del marcatore di apertura nel- 
la forma nome=" valore" , il valore è espresso tra virgolette sem- 
plici ' o doppie " (anche se in HTM L, a differenza che in XM L, le 
virgolette non sono obbligatorie per i valori senza spazi). I valori 
relativi ai colori sono espressi in formato esadecimale, la strin- 
ga del colore rappresenta i tre numeri, ognuno da 0 (ovvero 00) 
a 255 (ovvero FF), che compongono lo spettro RGB (Rosso .Ver- 
de, Blu) dei colori primari del monitor, quindi il bianco che è 
255-255-255 in esadecimale sarà #F F F F F F. 
Ogni TAG, detto anche Elemento, contiene decine di proprietà. 
L'elemento TABLE, ad esempio, contiene (tra le altre) queste pro- 
prietà: 







ALIGN 


Allineamento tabella 


BACKGROUND 


Immagine di sfondo 


BGCOLOR 


Colore di sfondo 


BORDER 


Spessore bordo 


BORDERCOLOR 


Colore bordo 


CELLPADDING 


Spazio intemo alle celle 


CELLSPACING 


Spazio tra una cella e l'altra 


HEIGHT 


Altezza 


Tutti gli elementi hanno poi degli attributi comuni, tra cui: 






ID 


Identificativo univoco dell'elemento 


Class 


Classe CSS 
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L'affollamento di attributi necessari per la formattazione di una 
pagina web ha portato poi alla nascita dei fogli di stile che non 
sono altro che raccolte di proprietà raggruppate per: 

• Nome del TAG 

• Nome del Gruppo di regole (Classe) 

• ID dell'elemento 

Le regole CSS sono espresse nella forma: 



nome:valore;nome2:valore2; 



E possono essere scritte direttamente nel TAG (modalità inline) 
usando l'attributo style: 

<table style="width:400px;background-color:#FFFFFF" > 

oppure inserite nel tag <style> nella pagina stessa: .3 

<style> 

TABLE { £ 
width:400px; 

background-color: #FFFFFF; 

} 

.myTable { 

width:400px; 

background-color:#FFFFFF: 

} 

#tablel { 

width:400px: 

background-color:#FFFFFF: 

} 

</style> 

qui abbiamo inserito le tre modalità di referenziare un gruppo 
di regole: 

• la prima si applicherà a tutti gli elementi che hanno il nome 
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TABLE 

• la seconda si applicherà a tutti gli elementi che hanno l'at- 
tributo class uguale al nome assegnato (senza punto) come: 
<table class=" myTable" > 

• la terza si applicherà all'elemento che ha l'id uguale a quel- 
lo indicato (senza cancelletto) come: 
<tableid="tablel"> 

Le regole CSS, oltre all'interno del TAG (nell'attributo style) e 
nel TAG <style>, possono essere definite anche in file separati 
da quello della pagina Web e poi collegate alla pagina " madre" 
con il TAG <link> : 

<link type=" text/css" rel=" stylesheet" href=" stili. css" > 



2.1 ED IL DOM? 

Fin qui un breve ripasso (degno di un Bignami) dell'HTM L, ma il 
DOM cos'è? 

In pratica con è altro che la modellizzazione dei vari TAG come 
gerarchia di oggetti. 

Come primo oggetto abbiamo Window che rappresenta una fi- 
nestra del browser (vedi schema in figura 2), ogni Window avrà 
un Document che rappresenta l'HTM L del documento corrente, 




SCHEMA DOM 



attributi 



figura 2: schema sintetico DOM 
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il quale avrà una serie di oggetti Element nidificati fino a rap 
presentare l'albero HTM L. 

Naturalmente le cose sono un po' più complesse di quanto enun 
ciato, tuttavia ai nostri scopi ci basta sapere che: 

1. tutti gli elementi sono visti come oggetti 

2. tutti gli attributi degli elementi sono le proprietà degli 
oggetti 

3. tutti gli oggetti espongono anche degli eventi 
Occorre ora soffermarci sul concetto di Nodo. Il nodo rappre 
senta l'entità principale del DOM , relativamente all'HTM L som 
nodi: 

• il Document stesso 

• gli Elementi oTAG 

• gli Attributi degli elementi 

• il Testo interno agli elementi 

Un tipo di nodo si riconosce dall'altro per la proprietà nodeTy 
pe che definisce, a seconda del valore, le varie tipologie : 

1 = Elemento 

2 = Attributo 

3 = Testo 

Il concetto di nodo è importante perché attraverso un nodo di pos- 
sono trovare i nodi figlio e il nodo padre. 
I nodi che possono contenere sotto-elementi (quindi nodi Elemento 
o il Document) hanno infatti la proprietà childNodes che rap- 
presenta l'insieme dei sotto-elementi e del testo e, i nodi elemento, 
hanno la proprietà attributes che rappresenta l'insieme degli 
attributi. 

Parimenti un nodo ha la proprietà parentNode che consente di 

risalire all'elemento padre. 

Altre proprietà comuni a tutti i nodi sono: 

nodeName - ovvero il nome del 
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Per capire meglio rifacciamoci all'esempio di codice HTM L visto 
in precedenza: 



<tablewidth="400"> 
<tr> 

<td bgcolor="#EEEEEE"> 

Nome 
</td> 

<td bgcolor="#FFFF66"> 
Cognome 



</td> 
</tr> 
</table> 



ovvero, tradotto in DOM : 



Nome nodo 


Tipo 


Valere 


Parent 




TABLE 


Element 






TR 


WIDTH 


Attribute 


400 


TABLE 




TR 


Element 




TABLE 


TD.TD 


TD 


Element 




TR 


#TEXT 


BGCOLOR 


Attribute 


#EEEEEE 


TD 




#TEXT 


Testo 


Nome 


TD 




TD 


Element 




TR 


#TEXT 


BGCOLOR 


Attribute 


#FFFF66 


TD 





Tutto questo si può esprimere in Javascript con iterazioni del ti- 
po: 

var body = document.body; 

forfvar i=0;i<body.childl\lodes.length;i++){ 
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if(node.nodeType==l) ;//element 
else; //text 

} 



2.2 TROVARE GU ELEMENTI 

Per andare a trovare l'istanza di un elemento HTM L dichiarato 
nella pagina abbiamo visto che è possibile implementare una 
serie di cicli For ed esaminare le proprietà nodeType e nodeVa- 
lue ciò però è decisamente poco pratico perché spesso gli ele- 
menti si trovano a vari livelli di nidificazione. 
Per questo il DOM mette a disposizione una serie di metodi mol- 
to utili: 

• getElementByld 

• getElementsByName 

• getElementsByTagName 

getElementByld 

getElementByld è il metodo dell'oggetto document che con- 
sente di referenziare un elemento presente nella pagina dato il 
suo attributo ID. 



Prendiamo sempre lo stesso esempio di HTM L , inserendo l'at- 
tributo ID in una cella: 



<table id=" myTable" width=" 400" > 
<tr> 

<td id=" primaCella" bgcolor=" #EEEEEE" > 
Nome 

</td> 

<td bgcolor=" #FFFF66" > 

Cognome 
</td> 
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</tr> 
</table> 

A questo punto sarà possibile riferirsi, nel codice Javascript, a 
questo elemento come: 

var celli = document.getElementByld(" primaCella" ); 

L'id deve naturalmente essere univoco per ogni elemento, nel 
caso in cui vi siano più elementi con lo stesso id verrebbe resti- 
tuito solamente il primo. 

getElementsByName 

getElementsByName è anch'esso un metodo di document che però 
consente di recuperare non un singolo elemento ma un'insie- 
me di elementi (Array) dato il valore del loro attributo name. 
Dato che l'attributo name è proprio solo degli elementi di input 
utente (form, input, select e textarea) la tecnica è applicabile 
solo a questi. 

Partendo, ad esempio, da questo codice HTM L : 

<input type=" text" name=" box" > 
<input type=" text" name=" box" > 
<input type=" text" name=" box2" > 

è possibile recuperare i primi due elementi input con: 

var boxes = document. getElementsByName(" box" ); 



getElementsByTagName 

getElementsByTagName, al contrario degli altri due metodi che 
abbiamo visto, non è proprio soltanto dell'oggetto document, ma 
di tutti gli elementi. Esso consente di recuperare tutti i sottoe- 
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lementi con unTAG di un determinato nome. 
Sempre rifacendosi all'esempio della tabella vista in preceden- 
za, possiamo recuperare il riferimento alla table con getEle- 
mentByld e quindi tutte le celle con getElementsByTagName: 

var oTable = document.getElementByld(" myTable" ); 
varcells = document.getElementsByTagName("TD"); 

il nome dell'elemento può essere scritto indifferentemente in 
maiuscolo o in minuscolo. 



2.3 TROVARE 

E IMPOSTARE GU ATTRIBUTI 

Abbiamo visto come sia facile trovare e referenziare attraverso 
Javascript gli elementi della pagina. Altrettanto facile è trovare 
gli attributi che popolano l'elemento individuato con il metodo 
getAttribute che è comune a tutti gli elementi. 
Prendiamo ad esempio questo frammento HTM L : 

<div id =" divi" title=" prova" >testo</div> 

Volendo recuperare da Javascript il valore dell'attributo title del- 
l'elemento DIV sarà sufficiente: 

var oDiv = document.getElementByld(" divi" ); 
var attValue = oDiv.getAttribute(" title" ); 

Altrettanto semplice è impostare la proprietà di un attributo, 
con il metodo setAttribute : 

var oDiv = document.getElementByld(" divi" ); 
oDiv.setAttributef title" ," nuovo valore" ); 
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setAttribute prevede due parametri, il primo è il nome dell'attributo 
da impostare o creare ed il secondo è il valore che deve assumere. 

Le proprietà 

getAttribute e setAttribute sono i metodi standard che offre il DOM 
per recuperare e impostare gli attributi, con questi metodi pos- 
siamo recuperare e impostare attributi anche non presenti nel lin- 
guaggio HTM L. 

Se ad esempio avessimo un TAG HTM L come: 

<divid=»divr categoria=» prova» >testo</div> 

potremmo egualmente recuperare e impostare l'attributo cate- 
goria con getAttribute e setAttribute anche se esso non è pre- 
visto dal linguaggio HTM L. Questa è una risorsa importante per 
lo sviluppatore perché consente di estendere i TAG secondo le 
proprie esigenze. 

Tuttavia quando abbiamo un riferimento ad un elemento HTM L 
attraverso il DOM l'oggetto risultante espone tutti gli attributi 
standard del linguaggio anche come proprietà. 
Quindi per recuperare o impostare l'attributo title (che è un at- 
tributo proprio di DIV) avremmo potuto tranquillamente usare: 

var oDiv = document.getElementByld(" divi" ); 
var attValue = oDiv.title; // lettura 



Praticamente ogni attributo che può essere inserito negli ele- 
menti HTML si ritrova come proprietà negli oggetti referenziati 
con DOM con lo stesso nome, fa eccezione l'attributo class uti- 
lizzato per riferirsi a un gruppo di regole CSS, in questo caso in- 
fatti la proprietà di chiama className. 
Quindi per impostare la classe CSS di un elemento dinamica- 
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mente dovremmo scrivere : 

var oDiv = document.getElementByld(" divi" ); 
oDiv.className=" miaClasse" ; 

Diverso è il discorso per gli stili in linea che, come abbiamo vi- 
sto, in HTM L si esprimono così: 

<div id=" divi" style="background:#FFFFFF;text- 

align:left;color:#0099EE"> 

nel DOM per ogni elemento esiste la proprietà style che però è 
un oggetto a sé stante che ha a sua volta una serie di proprietà 
per quante sono le regole definibili con i CSS. 
Quindi potremo impostare gli stili inline di un elemento con : 
var oDiv = document.getElementByld(" divi" ); 

oDiv.style. background = " #FFFFFF" ; 
oDiv.style.textAlign = " left" ; 
oDiv.style.color = "#0099EE"; 



2.4 CREARE E RIMUOVERE I NODI 

Finora abbiamo visto come sia possibile, grazie a DOM , manipolare 
gli elementi che esistono nella pagina HTML, ma le potenzia- 
lità di DOM non si esauriscono certo qui! 
Il modello dispone infatti di una serie di metodi per creare da ze- 
ro nuovi nodi e aggiungerli ad altri già esistenti o, viceversa, ri- 
muovere quelli già esistenti. 

Creazione dì nodi 

I metodi per la creazione di nuovi nodi appartengono all'og- 
getto document e sono: 
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• createElement 

• createTextNode 

c'è anche createAttribute, ma è reso pressoché inutile dal più 
comodo setAttribute che abbiamo già visto. 
Con createElement è possibile creare da zero un nuovo ogget- 
to e impostarne che proprietà. Ecco come creare un nuovo ele- 
mento DIV utilizzando il DOM con Javascript: 

var oDiv = document.createElement(" div" ); 
oDiv.id = "divi" ; 

oDiv.style.background = "#FFFFFF"; 
oDiv.style.textAlign = " left" ; 
oDiv.style.color = "#0099EE"; 

Il parametro del metodo createElement è appunto il nome del- 
l'elemento. 

Nello stesso modo è possibile anche creare dinamicamente un 
nodo di testo (cioè del testo) : 

var txt = document.createTextNoder Questo è un testo" ); 

dove il parametro sarà invece la stringa valore del nodo. 
Possiamo così creare nuovi elementi o nodi di testo ma se ci fer- 
massimo qui questi oggetti verrebbero solamente instanziati in 
memoria e non visualizzati nel browser. Per far sì che questo 
succeda occorre collocarli, cioè inserirli all'interno di un ele- 
mento. 

Per questa operazione tutti gli elementi dispongono di alcuni 
metodi: 

• appendChild - che consente di inserire un nodo 
sotto ad un altro 

• insertBefore - che consente di inserire un nodo prima 
di un altro 
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• replaceNode - che consente di sostituire un nodo 
con un altro 

Qui ci limiteremo a prendere in considerazione il primo metodo 
e vediamo come aggiungere un nuovo elemento a questo DIV esi- 
stente : 

<div id=" container" ></div> 

In javascript creeremo quindi un nuovo DIV e lo inseriremo sot 
to quello esistente con : 

var oDiv = document.createElement(" div" ); 
oDiv.id = " divi" ; 

oDiv.style. background = " #FFFFFF" ; 
oDiv.style.textAlign = " left" ; 
oDiv.style.color = "#0099EE"; 

var divEsistente = document.getElementByld(" container" ); 
divEsistente.appendChild(oDiv); //appende l'elemento oDiv 

Il risultato visibile nel browser sarà quindi come se noi avessimo 
scritto in HTML: 

<div id=" container" > 

<div id =" divi" style=" background:#FFFFFF;text- 

align:left;color:#0099EE" ></div> 

</div> 

innerHTML 

La creazione di nodi con createElement non è però l'unico mo- 
do di aggiungere dinamicamente dei contenuti agli elementi già 
esistenti, il DOM dota infatti gli elementi della proprietà in- 
nerHTM L che può essere usata per aggiungere frammenti di co- 
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dice HTM L in forma di stringa a elementi già esistenti. 
Il codice che abbiamo visto in precedenza, per aggiungere un 
DIV sotto ad un altro, con innerHTM L, si sarebbe potuto espri- 
mere con: 



var divEsistente = document.getElementByld(" container" ); 
divEsistente.innerHTM L='<div id="divl" 

style="background:#FFFFFF;' + 
'text-align:left;color:#0099EE"x/div>'; 

si risparmiano un bel po' di righe di codice ma si rende lo script 
meno lineare. 

innerHTM L ha però anche altri risvolti pratici, ad esempio può es- 
sere usato per inserire del testo direttamente senza usare il me- 
todo document.createTextNodeO . 
Con createTextNode per aggiungere del testo avremmo dovuto 
scrivere: 



var oDiv = document.createElement(" div" ); 
oDiv.id = "divi" ; 

oDiv.style.background = "#FFFFFF"; 

oDiv.style.textAlign = " left" ; 

oDiv.style.color = " #0099EE" ; 

var txt = document.createTextNode(" Questo è un testo" ); 

oDiv.appendChild(txt); 

var divEsistente = document.getElementByld(" container" ); 
divEsistente.appendChild(oDiv); //appende l'elemento oDiv 

M entre usando innerHTM L possiamo scrivere direttamente: 

var oDiv = document.createElement(" div" ); 
oDiv.id = "divi"; 
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oDiv.style.textAlign = " left" ; 
oDiv.style.color = "#0099EE"; 
oDiv.innerHTM L=" Questo è un testo" ; 
var divEsistente = document.getElementByld(" container" ); 
divEsistente.appendChild(oDiv); //appende l'elemento oDiv 

La proprietà innerHTM L viene poi utilizzata anche per rimuove- 
re tutto il contenuto di un elemento (sotto-elementi e nodi di 
testo) in modo rapido. 
Se abbiamo del codice HTM L come questo : 

<div id=" container" > 

<div id =" divi" style=" background:#FFFFFF;text- 

align:left;color:#0099EE" >testo</div> 
<div id="div2" style=" background:#FFFFFF;text- 

align:left;color:#0099EE" >Altro testo</div> 

</div> 

possiamo rimuovere tutto il contenuto del DIV principale sem- 
plicemente con : 

4P 

var divEsistente = document.getElementByld(" container" ); 
divEsistente. innerHTM L= " " ; 

ed il risultato sarà : 

<div id=" container" ></div> 

Rimuovere i nodi 

Al di là del piccolo trucco che abbiamo visto per la rimozione 
del contenuto di un elemento utilizzando la proprietà innerHTM L 
il DOM offre anche un modo più "orientato agli oggetti" . 
Ogni elemento dispone infatti dei metodi: 




I libri di ioPROGRAMMo/Programmare con Ajax 



29 



PROGRAMMARE CON 

AJAX 



DOM HTML 



Capitolo 2 



• removeChild - per rimuovere un nodo figlio 

• removeNode - per rimuovere il nodo stesso 
Quindi per rimuovere il DIV con id "div2" da: 



<div id=" container' 


> 


<div id=" divi" 


style=" background:#FFFFFF;text- 


align:left;color:#0099EE" >testo</div> 


<div id="div2" 


style=" background:#FFFFFF;text- 


align:left;color:#0099EE" >Altro testo</div> 



</div> 



potremo usare : 

var divContainer = document.getElementByld(" container" ); 
var div2 = document.getElementByld(" div2" ); 
divContainer.removeChild(div2); 

oppure: 

var div2 = document.getElementByld(" div2" ); 
div2.removeNode(); 



2.5 MANIPOLAZIONE DI TABELLE 

Le tabelle in HTM L si definiscono con i seguenti elementi: 

• table - definisce una tabella 

• tr - definisce una riga in una tabella 

• td - definisce una cella in una riga (al posto di td è possibile 
usare th per le celle della riga di intestazione). 

Quindi il codice HTM L di una tabella potrebbe essere : 



<table> <! --inizia tabella --> 
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<td> <!-prima Cella— > 
Nome <! --testo --> 
</td><!~ fine prima Cella— > 
<td><!~ seconda Cella -> 
Cognome <! -testo -> 
</td><!- fine seconda Cella-- > 
</tr> <! --fine riga-> 
</tablex!-fine tabella-> 



Una cosa che gli sviluppatori a volte ignorano o dimenticano è 
poi che esistono degli elementi che raggruppano le righe in ba- 
se alla loro collocazione: 

• THead- Testa della tabella 

• TBody- Corpo della tabella .S 

• TFoot - Piede della tabella 

Praticamente e un po' come avviene in Word con l'intestazione 
e il piè di pagina. 

Se questi elementi non vengono definiti in HTM L il parser del 
Browser li aggiunge automaticamente, inserendo tutte le righe 
nel TBody. 

L'esempio precedente sarebbe letto dal browser come : 



<table> <! --inizia tabella --> 

<theadx/thead> 

<tbody> 

<tr> <! --inizia riga-- > 
<td> <!-prima Cella-> 
Nome <! -testo --> 
</td><!~ fine prima Cella— > 
<td><!~ seconda Cella --> 
Cognome <! -testo --> 



I libri di ioPROGRAMMo/Programmare con Ajax 



31 



PROGRAMMARE CON 

AJAX 



DOM HTML 



Capitolo 2 



</td><!-- fine seconda Cella-> 
</tr> <! — fine riga--> 
</tbody> 
<tfootx/tfoot> 



Questo dettaglio è importante perché quando, attraverso il DOM , 
abbiamo il riferimento a una riga (elemento tr): 

var oTr = document.getElementByld(" rigai" ); 



ci si aspetterebbe che il nodo Parent fosse l'elemento table: 
var oTr = oTr.parentNode; 

e invece no, perché nel DOM il parent di tr è sempre tbody, quin- 
di per trovare il riferimento alla tabella avremmo dovuto scri- 
vere: 

var oTr = oTr.parentNode.parentNode; 

Essendo composta di elementi come gli altri, una tabella può 

essere gestita con il DOM . 

Ad esempio possiamo crearla con: 

var oTable = document.createElement(" table"); 
var oTr = document.createElement(" tr" ); 
var oTd = document.createElement(" td" ); 



oTr.appendChild (oTd); 

var oTd = document.createElement(" td" ); 

oTd.innerHTML= "Cognome"; 
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oTable.appendChild (oTr); 
Table Object Model 

Gli elementi che compongono la tabella, probabilmente per il 
largo uso che se ne fa, oltre al DOM (che resta sempre utilizza- 
bile) dispongono anche di un altro modello ad oggetti: il Table 
Object Model. 

Cioè, in pratica, hanno dei metodi e proprietà proprie. Vediamo 
quali. 

Metodi per la manipolazione di tabelle 



createTHead 


Crea un elemento tHead nella tabella. 


deleteTHead 


Cancella un elemento tHead dalla tabella. 


createTFoot 


Crea un elemento tFoot element nella tabella. 


deleteTFoot 


Cancella un elemento tFoot dalla tabella. 


insertRow 


Crea una nuova riga nella tabella e la aggiunge all'insieme 
rows. 


deleteRow 


Cancella la riga dalla tabella e la rimuove dall'insieme rows. 


insertCell 


Crea una nuova cella in una riga e la aggiunge all'insieme 
cells. 


deleteCell 


Cancella la cella da una riga e la rimuove dall'insieme cells. 



s 



insertRow e insertCell, hanno anche un parametro che definisce 
la posizione in cui inserire l'oggetto, il valore -1 indica che de- 
ve essere inserito in coda. Per cui, ad esempio, il codice: 

var oTr = oTable.insertRow(-l); 



Inserisce una riga in coda alle altre della tabella. 
Insiemi 



tBodies 


Insieme degli oggetti tBody nella tabella. 


Rows 


Insieme degli oggetti tr (riga) nella tabella. 


Cells 


Insieme degli oggetti td (cella) nella riga di una tabella o 
nell'intera tabella. 



I libri di ioPROGRAMMo/Programmare con Ajax 



33 



PROGRAMMARE CON 

AJAX 



DOM HTML 



Capitolo 2 



Righe e celle hanno poi proprietà di indice che indicano la loro 

posizione. 

Indici 



sourcelndex 


Posizione dell'elemento nella gerarchia di una tabella. 


row Index 


Indice della riga nel contesto della tabella a cui 
appartiene. 


sectionRowIndex 


Indice della riga nel contesto all'interno della sezione 
THead.TBody o TFoot. 


celllndex 


Indice della cella nel contesto della riga a cui appartiene. 



Con questi strumenti lavorare sulle tabelle diventa più sempli- 
ce. Ecco come si presenterebbe il nostro codice usando il Table 
Object Model: 

var oTable = document.createElement(" table"); 
var oTr = oTable.insertRow(-l); 
var oTd = oTr.insertCell(-l); 
oTd.innerHTML= "Nome"; 
var oTd = oTr.insertCell(-l); 
oTd.innerHTML= "Cognome"; 

Notate come i metodi insert di righe e celle provvedano direttamente 
all'append dell'oggetto all'insieme relativo. 

2.6 GU EVENTI 

Arrivati a questo punto abbiamo imparato a referenziare gli ele- 
menti HTM L con oggetti con il DOM e a manipolarli attraverso 
attributi e proprietà. 

Ci manca però ancora una cosa importante : collegare i nostri scripts 
che utilizzano il DOM ad azioni dell'utente o a eventi del brow- 
ser. Gli eventi non sono altro che segnali (o messaggi) che l'ap- 
plicazione manda al verificarsi di certe condizioni, se a questi 
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segnali sono associate delle funzioni script queste saranno ese- 
guite. 

In HTM L gli eventi sono espressi come normali attributi dei TAG. 
Un bottone, ad esempio, può dichiarare una funzione associata 
all'evento onclick semplicemente con: 

<button id=" btnl" onclick=" cliccami))" >Clicca qui! </button> 

nella pagina ci sarà quindi uno script all'interno del quale verrà 
definita la funzione cliccami(): 



<script language=" javascript" type=" text/javascript" > 
function cliccami(){ 

alerte Mi hai cliccato!"); 

} s 

</script> 



2.7 ASSOCIAZIONE 

DI EVENTI CON IL DOM 

L'associazione evento/funzione può essere effettuata anche con 
il DOM in tre modi diversi: 



var oButton = document.getElementByld(" btnl" ); 
//primo modo 

oButton. onclick = cliccami; 
//secondo modo 
oButton. onclick = function (){ 
alerti" Mi hai cliccato!"); 

} 

//terzo modo 

oButton. onclick = new Function('alert(" Mi hai cliccato!")'); 
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tutti tre i modi assegnano una funzione all'evento tuttavia: 

• il primo modo assegna un riferimento ad una funzione defi- 
nita da qualche altra parte (si riconosce che è un riferimento 
perché sono assenti le parentesi) 

• il secondo modo assegna direttamente una funzione costrui- 
ta sul posto 

• il terzo modo utilizza il costruttore new per un nuovo ogget- 
to Function che ha il corpo passato come parametro 

Il secondo ed il terzo modo sono utili in particolare con il DOM . 
Il secondo è decisamente il più usato tuttavia presenta un in- 
conveniente particolare : all'interno della funzione costruita le 
variabili esterne non contano più. 
Cercheremo di spiegarci meglio con un esempio. 
Abbiamo un ciclo con cui si crea una serie di bottoni, cliccando 
su ogni bottone deve apparire un messaggio con un numero 
progressivo diverso, quindi implementiamo il seguente codice: 

forfvar i=0;i<4;i++){ 

var oButton = document.createElement(" button" ); 
oButton.value= " bottone " + i; 
oButton.onclick = function (){ 

alerte Hai premuto il bottone " + i); 

} 

} 

bene, questo codice non funzionerà come desiderato perché al- 
l'interno della funzione la variabile i non ha alcun senso poiché 
la funzione verrà eseguita nel contesto dell'elemento non in 
quello globale. 

In questi casi si deve quindi ricorrere al costruttore di funzione 
che permettere di comporre il corpo della stessa come stringa: 



36 



I libri di ioPROGRAMMo/Programmare conAjax 



Capitolo 2 



DO M HTML 



var oButton = document.createElement(" button" 
oButton.value= " bottone " + i; 
oButton.onclick = new Function ( 

'alerti" Hai premuto il bottone "' + i + ')' 

); 



} 



Associazione multipla di eventi 

Quella che abbiamo visto prima è la modalità di associazione 
singola, evento/funzione. 

I browser però supportano anche l'associazione multipla, cioè più 
funzioni associate allo stesso evento. 
Purtroppo però lo fanno in maniera radicalmente differente. 
Internet Explorer 

Internet Explorer segue una strada proprietaria attraverso il me- 
todo attachEvent disponibile per tutti gli oggetti. 
Vediamo come assegnare più eventi in Internet Explorer: 

var oButton = document.createElementf button" ); 
oButton.attachEventf onclick" .cliccami); 
oButton. attachEventf onclick" ,function (){ 
alerte secondo messaggio") 

}); 

come possiamo vedere il primo argomento del metodo è il no- 
me letterale dell'evento, mentre il secondo è una funzione indi- 
cata come riferimento o scritta direttamente. 
Fìrefox e gli altri 

I browser più "ligi" agli standard realizzano invece l'associa- 
zione multipla ad un evento con il metodo addEventListener, 
anch'esso proprio di tutti gli oggetti DOM. 
L'uso è simile a quello di attachEvent : 
var oButton = document.createElementf button" ); 
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oButton.addEventListenerf" click" .cliccami, false); 
oButton.addEventListener(" click" .function (){ 

alerte secondo messaggio" ) 
Ifalse); 

Come possiamo notare il nome dell'evento è espresso senza il 
prefisso "on" e c'è un terzo parametro booleano; il terzo para- 
metro se impostato a true indica che l'evento viene gestito di- 
rettamente dall'oggetto e non viene notificato ai livelli supe- 
riori. 

Se, ad esempio, abbiamo un DIV nidificato in un altro e tutti e due 
avessero associata una funzione all'evento onclick l'associa- 
zione con addEventListener effettuata sull'elemento più interno, 
se dichiarata con il terzo parametro a true, significherebbe che 
il click sull'elemento non darebbe luogo all'azione prevista dal- 
l'evento assegnato all'elemento superiore. 
Mettere d'accordo tutti 

In questo come in altri casi dello scripting Client-side le differenze 
tra i vari browser trasformano la vita del programmatore in un 
inferno, per fortuna c'è una libreria di funzioni chiamata lEEmu 
(http://webfx.eae.net/dhtml/ieemu) che permette di utiliz- 
zare la sintassi di Internet Explorer anche con gli altri browser. 

onload 

Tutti gli oggetti del DOM hanno associati una serie di eventi, 
quello che però per noi ha un'importanza cruciale è l'evento 
onload associato all'oggetto window. 
Per capirne meglio l'importanza analizziamo la seguente pagi- 
na HTM L : 

<html> 



<head> 
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<script language=" javascript" type=" text/javascript" > 
var divi = document.getElementByldf" divi" ); 
alertfdivl.innerHTM L); 
</script> 
</head> 
<body> 

<div id=" divi" >Testo</div> 

</body> 

</html> 



come ormai avrete capito lo script dovrebbe trovare l'elemento 
con id " divi" e mostrarne il contenuto in un messaggio. 
Questo script invece non funzionerà. Non funzionerà perché, 
trovandosi a livello globale, verrà eseguito prima ancora che il 
documento HTM L sia stato completamente caricato ed analiz- 
zato dal browser, in questa fase il DOM non è disponibile (pro- 
prio perché il documento non è stato ancora analizzato). 
Ed è qui che entra in gioco l'evento onload; onload infatti è un 
evento che si verifica quando il documento è completamente 
caricato e analizzato e quindi DOM è disponibile. 
Il nostro codice quindi, per funzionare, avrebbe dovuto essere scrit- 
to così: 



<html> 
<head> 

<title>Esempio</title> 

<script language=" javascript" type=" text/javascript" > 
window. onload = function () { 

var divi = document.getElementByld(" divi" ); 
alert(divl.innerHTML); 

} 

</script> 
</head> 
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<body> 

<div id=" divi" >Testo</div> 
</body> 



Quindi : quando le azioni che coinvolgono il DOM non sono col- 
legate ad altro evento (come il click su un bottone ecc.. ) devono 
essere eseguite nel contesto dell'evento onload di window. 

Altri eventi 

Ogni oggetto DOM ha associati una serie di eventi; qualcuno 
specifico per la funzione che deve svolgere quel determinato 
elemento, altri comuni un po' a tutti gli elementi. 
Tra gli eventi più comuni troviamo: 

• onkeydown - quando l'utente preme un tasto 

• onkeypress - quando l'utente preme un tasto alfanumerico 

• onkeyup - quando l'utente rilascia un tasto 

• oncontextmenu - quando l'utente fa click con il tasto destro 

• onclick - quando l'utente fa click sull'oggetto con il tasto si- 
nistro del mouse 

• ondblclick - quando l'utente fa doppio click sull'oggetto con 
il tasto sinistro del mouse 

• onmousedown - quando l'utente fa click sull'oggetto con 
qualsiasi tasto del mouse 

• onmouseenter - quando l'utente si sposta con il mouse nel- 
l'area dell'oggetto 

• onmouseleave - quando l'utente lascia con il mouse nell'a- 
rea dell'oggetto 

• onmousemove - quando l'utente si muove con il mouse nel- 
l'area dell'oggetto 

• onmouseout - quando l'utente lascia con il mouse i limiti 
dell'area dell'oggetto 

• onmouseover - quando l'utente entra con il mouse nei limi- 
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ti dell'area dell'oggetto 
• onmouseup - quando l'utente rilascia qualsiasi tasto del 
mouse, in precedenza premuto, nell'area dell'oggetto 



2.8 METTIAMO TUTTO INSIEME 

Con quello che abbiamo visto fin qui non avremo imparato tut- 
to quello che c'è da sapere sul DOM HTM L ma dovremmo ave- 
re le " carte in regola" per un primo semplice esempio su cose che 
ci torneranno utili con AJAX. 
Problema 

Creare una pagina HTM L con un BUTTON e un DIV vuoto. 
Sull'evento click associato al BUTTON si deve compiere questa 
azione: 

• Se il DIV è vuoto creare una TABLE e inserirla sotto di esso 

• Se il DIV è nascosto visualizzarlo, viceversa se è visibile nasconderlo 

Soluzione 

Passo 1 - creare la pagina H1WL 

In un editor di testo creiamo la seguente pagina HTM L: 

4P 

<html> 
<head> 

<title>Esempio</title> 

<script language=" javascript" type=" text/javascript" > 
//codice javascript 
</script> 
</head> 
<body> 

<button id=" btnl" onclick=" cliccami))" >Clicca qui per vedere la 
tabella! </button> 

<div id=" container" style=" display:none" ></div> 
</body> 
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Nel browser il risultato sarà quello indicato in figura A 



| C Esempio - Windows Internet Explorer 


,|njx| 


^ ^ |^ C:\Dati\documenti\Libro AJAX j | *t | X |Google 




File Edi M DevToolBar ViewDOM Disable View Outline Validate Irnages Resize 

Gocgle Gh J - ■<■$&• <3 a 


Mise Show Ruler 
0 Impostazioni^ 












zi 


| J My Computer 




Figura A: a pagina HTM L di esempio 



Notare come abbiamo definito degli id per ogni elemento, lo 
stile CSS inline con la proprietà display su none (nascosto) per 
il DIV e l'associazione all'evento onclick per BUTTON. 

Passo 2 - codice DOM perla creazione della tabella 

All'interno dell'elemento <script> dichiariamo un oggetto glo- 
bale currentTable, inizialmente a nuli, e scriviamo una funzio- 
ne createTable che crea dinamicamente la tabella , con dati pre- 
si da un array, l'appende al DIV e l'assegna alla variabile glo- 
bale currentTable: 



var currentTable = nuli; 
function createTable(){ 



//prima riga 

var headers = [" nome" ," cognome" ," indirizzo" ]; 
//dati strutturati come Array di Array 
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["Mario", "Rossi" , "via Dante 2 Milano"], 
[" Alfredo" , " Bianchi" , " via Verga 5 Firenze" ], 
[" Giovanni" , " Verdi" , " via Foscolo 10 Roma" ], 
[" Francesco" , " Gialli" , " via Pascoli 7 Napoli" ] 

]; 

var oTable = document.createElementfTABLE" ); 
//proprietà tabella 
oTable.width = "400"; 
oTable.celISpacing = " 0" ; 
oTable.celIPadding = " 2" ; 
//prima riga 

var oTr = oTable.insertRow(-l); 
for(var i=0;i<headers.length;i++){ 
var oTd = oTr.insertCell(-l); 

oTd.align=" center" ; .3 
oTd. background = " #EEEEEE" ; 
oTd.style.font = " bold 12px a ri a I " ; 
oTd.style.borderBottom = " lpx solid #666666" ; 
oTd.innerHTML= headers[i]; 

} 

//righe dati 

for(var i=0;i<data.length;i++){ 

var rowData = data [i]; //array riga dati 
var oTr = oTable.insertRow(-l); 
for(var n=0;n<rowData.length;n++){ 

var oTd = oTr.insertCell(-l); 

oTd.style.font = " 12px verdana" ; 

oTd.style.borderBottom = " lpx solid #999999" ; 

oTd.innerHTML= rowData[n]; 

} 

} 

currentTable = oTable; 

var container = document.getElementByld(" container" ); 
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container.appendChild(currentTable); 

} 



Scriviamo poi la funzione cliccami, già associata all'evento on- 
click di BUTTON, che si occupa di richiamare createTable se cur- 
rentTable è nuli e di gestire la visibilità del DIV: 



function cliccami(){ 

//instanzia i riferimenti 

var container = document.getElementByld(" container" ); 

varbtnl=document.getElementByld("btnl"); 

//controlla currentTable ed eventualmente la crea 

if(currentTable==null) createTable)); 

//imposta visibilità del DIV 

if (container.style.display==" none" ) { 

container.style.display=" " ; 

btnl.value = "Clicca qui per nascondere la tabella!" 

} 

else { 

container.style.display=" none" ; 

btnl.value = "Clicca qui per vedere la tabella!" 

} 

} 

Passo 3 - controllare il risultato 
Alla fine il codice completo della nostra pagina sarà : 
<html> 
<head> 

<title>Esempio</title> 



var currentTable = nuli; 
function createTable(){ 
//definizione dati tabella 
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var headers = [" nome" ," cognome" ," indirizzo" ]; 

//dati strutturati come Array di Array 

var data = [ 

[" M ario" , " Rossi" , " via Dante 2 M ilano" ], 
[" Alfredo" , " Bianchi" , " via Verga 5 Firenze" ], 
[" Giovanni" , " Verdi" , " via Foscolo 10 Roma" ], 
[" Francesco" , " Gialli" , " via Pascoli 7 Napoli" ] 

]; 

var oTable = documentcreateElementf TABLE" ); 
//proprietà tabella 
oTable.width = "400"; 
oTable.celISpacing = " 0" ; 
oTable.celIPadding = " 2" ; 
//prima riga 

var oTr = oTable.insertRow(-l); .3 
for(var i=0;i<headers.length;i++){ 

var oTd = oTr.insertCell(-l); 

oTd.align =" center" ; 

oTd. background = " #EEEEEE" ; 

oTd.style.font = " bold 12px a ria I" ; 

oTd.style.borderBottom = " lpx solid #666666" ; 

oTd.innerHTM L= headers[i]; 

} 

//righe dati 

forfvar i=0;i<data.length;i++){ 

var rowData = data [i]; //array riga dati 
var oTr = oTable.insertRow(-l); 
for(var n=0;n<rowData.length;n++){ 

var oTd = oTr.insertCell(-l); 

oTd.style.font = " 12px verdana" ; 

oTd.style.borderBottom = " lpx solid #999999" ; 

oTd.innerHTM L= rowData[n]; 

} 
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} 

currentTable = oTable; 

var container = document.getElementByld(" container" ); 
container.appendChild(currentTable); 

} 

function cliccami(){ 
//instanzia i riferimenti 

var container = document.getElementByld(" container" ); 
var btnl = document.getElementBy]d(" btnl" ); 



if(currentTable==null) createTableO; 

//imposta visibilità del DIV 

if (container.style.display==" none" ) { 

container.style.display=" "; 

btnl.value = "Clicca qui per nascondere la tabella!" 

} 

else { 

container.style.display=" none" ; 

btnl.value = "Clicca qui per vedere la tabella!" 

} 

} 

</script> 
</head> 
<body> 

<button id=" btnl" onclick="cliccami()" >Clicca qui per vedere la 
tabella! </button> 

<div id=" container" style=" display:none" ></div> 




Se eseguiamo la pagina nel browser, cliccando sul bottone po- 
tremo vedere la tabella che appare (o, se visibile, scompare) co- 
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me in figura B 
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Figura b: il nostro codice in azione 
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Dopo il breve " ripasso" di javascript e del DOM HTM L non possiamo tra- 
scurare il secondo ingrediente di AJAX: l'XM L. 
L'XM L è una modalità di formattazione del testo a marcatori molto si- 
mile all'HTM LA differenza di quest'ultimo però: 

• è libero nel contenuto, in quanto possiamo usare elementi e attribu- 
ti con nomi arbitrari 

• è più rigido nella sintassi 

M entre infatti per un documento XM L ci possiamo " inventare" i nomi 
di elementi e attributi come in : 

<biblioteca> 

<reparto nome- 1 narrativa" > 
<libro>Guerra e pace</libro> 
<libro>Odissea</libro> 
</reparto> 
</biblioteca> 

Per la scrittura di un documento Well Formed dobbiamo seguire poche 
ma importanti regole sintattiche, un documento non Well Formed di- 
venta infatti inutilizzabile dai programmi che dovranno utilizzarlo: 

Regola numera 1 - dementa radice 

Il documento deve avere uno ed un solo elemento radice (root elementi 
ad esempio: 

<biblioteca> 

<libro>Guerra e pace</libro> 
<libro>Odissea</libro> 
</biblioteca> 

Abbiamo uno e un solo elemento (biblioteca) come radice. 
Un documento invece del tipo: 
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<libro>Guerra e pace</libro> 
<libro>Odissea</libro> 

Sarebbe errato perché ha due elementi radice. 

Regola numero 2 - tag finali obbligatori 

Quando un elemento contiene testo o altri elementi deve essere chiu- 
so con il corrispondente tag finale. Ad esempio: 

<libro>Guerra e pace</libro> 

Dove l'elemento <libro> deve trovare corrispondenza nel tag di chiusura 
</libro> allo stesso livello. 

Senza il tag di chiusura verrebbe generato un errore dai programmi che 
tentino di leggerlo. 

/tegola numero 3 - elementi vuoti 

Se un elemento è vuoto, nel senso che non contiene testo o altri elementi, 
la chiusura può avvenire anche con la sintassi abbreviata: <libro/>. 
Che sarebbe equivalente a <librox/libro>. 

Regola numero 4 - attributi tra virgolette 

Gli attributi devono essere racchiusi tra virgolette doppie (" ) o sempli- 
ci ('). Entrambe le virgolette utilizzate devono essere dello stesso tipo ( 
doppie o semplici). 

Ad esempio, questo metodo per definire gli attributi è corretto: 

<libro autore=" Verga" >l M alavoglia</libro> 

Questo invece è errato 

<libro autore=Verga>l Malavoglia</libro> 



Regola numero S - elementi non sovrapposti 
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Gli elementi non possono essere chiusi prima di chiudere i sotto-ele- 
menti in essi contenuti. 
Questo è un esempio di sintassi non valida: 

<biblioteca> 
<narrativa> 

<libro autore=" Verga" > 
I Malavoglia 
</narrativa> 
</libro> 
</biblioteca> 

_C 

Perché l'elemento narrativa viene chiuso prima dell'elemento libro 

che inizia al suo interno. 

La sintassi corretta sarebbe stata invece: 

<biblioteca> 

<narrativa> „E 
<libro autore=" Verga" > 

I Malavoglia 
</libro> 
</narrativa> 
</biblioteca> 

Regola mimerò 6 - gli elementi sono case-sensitive 

ITAG di apertura e di chiusura devono avere il nome scritto con lettere 
dello stesso tipo (maiuscole/minuscole), ad esempio l'elemento: <li- 
brox/libro> è corretto, mentre non lo è:<UBROx/libro>. 



3.1 IL DOM XML 

Ebbene sì, anche XM L come HTM L ha un suo Document Object Model 
(anzi quello di HTM L deriva per buona parte da XM L) che è implemen- 
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tato dai programmi che analizzano l'XM L (parser). 



I nodi 

Anche qui ritroviamo il concetto di Nodo che ha tre proprietà fonda- 
mentali: 

• nodeType- il tipo di nodo 

• nodeValue- il valore del nodo 

• nodeName- il nome del nodo 

L'oggetto Node è la base per tutti gli altri oggetti che ne derivano per 
estensione (attributi, elementi ecc.. ). Esso dispone quindi di proprietà 
e di metodi comuni anche agli oggetti derivati: 
Proprietà 



attributes 


Un oggetto NamedNodeMap contenente tutti gli 




attributi di un nodo 


childNodes 


Un oggetto NodeList contenente tutti i nodi figlio 


fi rstChild 


Il primo nodo figlio 


lastChild 


L'ultimo nodo figlio 


namespaceURI 


L' URI del namespace di un nodo 


nextSibling 


Il nodo immediatamente seguente a un nodo allo stesso 
livello 


nodeName 


Il nome di un nodo 


nodeType 


Il tipo (costante numerica) di un nodo 


nodeValue 


Il valore del nodo 


ownerDocume 


it L'oggetto Document di un nodo 


parentNode 


Il nodo che contiene il nodo 


prefix 


Il prefisso del namespace di un nodo 


previousSiblin< 


Il nodo immediatamente precedente a un nodo allo 


Metodi 



appendChild(newnode) 


Aggiunge un nuovo nodo figlio a un nodo e lo 
restituisce 


cloneNode(boolean) 
hasChildNodesf) 


Crea una copia esatta di un nodo. Se il parametro 
è true riproduce anche i nodi figli 


insertBefore(newnode,re 


Restituisce true o false a seconda del il nodo ha 
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removeChild(nodename) 


Rimuove il nodo figlio specificato e lo restituisce 


replaceChild(newnode,ol 
dnode) 


Sostituisce il vecchio nodo (oldnode) con il nuovo 
(newnode) e restituisce il vecchio nodo 



Ovviamente tali proprietà e metodi avranno un senso diverso a se- 
conda del tipo di nodo a cui si applicano. Ad esempio la proprietà at- 
tributes di un nodo di tipo Attr (attributo) restituirà nuli ecc.. 

Dall'oggetto Node derivano, come abbiamo detto, gli altri oggetti 
che rappresentano particolari tipi di nodi, tra cui document, element 
e attribute. 



Oggetto Document (derivato da mode) 

Document rappresenta il documento XM L stesso. 
Proprietà 



doctype 


Il DTD o lo Schema del documento 


documentElement 


L'oggetto Element che rappresenta l'elemento 
radice del documento 



Metodi 


createAttributef" name") 


Crea un nuovo nodo attributo 


createCDATASection(" text" ) 


Crea un nuovo nodo CDATA 


createCommentC'text") 


Crea un nuovo nodo commento 


createDocumentFragmentO 


Crea un oggetto vuoto documentFragment 


createElementf" name") 


Crea un nuovo nodo elemento 


createEntityReferencef" name" ) 


Crea un nuovo nodo entityReference 


createProcessinglnstruction 
(target, text) 


Crea un nuovo nodo processinglnstruction 


createTextNode(" text") 


Crea un nuovo nodo text 


getElementByldf' id" ) 


Restituisce il nodo corrispondente a un id 


getElementsByTagName 
(" name") 


Restituisce un oggetto NodeList di tutti gli 
oggetti Nodo che hanno il nome uguale a 
quello specificato. 



s 



Oggetto Element (derivato da Node) 
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Element rappresenta un nodo di tipo elemento, un elemento XM L 
ad esempio: 



Se un elemento ha del testo contenuto questo viene visto come no- 
do figlio di tipo testo (non come nodeValue). 
Proprietà 



tagName 



Nome dell'elemento (lo stesso valore di 





Metodi 


getAttribute(name) 


Restituisce il valore dell'attributo specificato 


getAttributeNode(name) 


Restituisce l'attributo specificato come 
oggetto Attribute 


getElementsByTagName(name) 


Restituisce un oggetto NodeList di tutti gli 
oggetti Nodo che hanno il nome uguale a 
quello specificato. 


hasAttributeO 


Restituisce true o false a seconda se 
l'elemento ha attributi 


normalizef) 


Unisce tutti i nodi di Testo sottostanti in un 
unico nodo di Testo 


removeAttribute(name) 


Rimuove il valore dell'attributo specificato 


removeAttributeNode(name) 


Rimuove l'attributo specificato 


setAttribute(name,value) 


Imposta il valore dell'attributo specificato 


setAttributeNode(name) 


Inserisce un nuovo attributo 



Oggetto Attribute (derivato da Node) 

Rappresenta l'attributo di un elemento. 
Ad esempio in: 



<prezzovalore="307> 



L'oggetto attribute sarà corrispondente a valore. 
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Proprietà 



name 
value 


nome dell'attributo (lo stesso valore di 
nodeName) 




Restituisce o imposta il valore dell'attributo 



3.2 DOM XML E JAVASCRIPT 

Abbiamo detto che XM L DOM (come HTM L DOM ) non è che un'in- 
terfaccia di programmazione per accedere, in lettura e scrittura ai 
dati contenuti in un documento XM L. 
Questa operazione viene compiuta da un parser che non è altro che 
un programma che analizza un documento XM L e restituisce un og- 
getto DOM che può essere manipolato attraverso proprietà e metodi. 
Esistono dei parser praticamente per tutti i linguaggi di program- 
mazione, noi però, per utilizzareAJAX, dovremo accedere al DOM XM L 
attraverso Javascript. 

Javascript, com'è logico essendo un linguaggio di script, non ha un 
parser XM L integrato nell'engine, si appoggia invece a quelli che gli 
mette a disposizione il Browser. 

E qui vengono le "dolenti note" ! Come al solito i vari browser met- 
tono a disposizione canali differenti per l'accesso a XM L. Internet Ex- 
plorer lo fa attraverso la chiamata ad un oggetto ActiveX mentre 
Firefox ed altri attraverso dei metodi integrati. 

Accesso al DOMI con Javascript 

Per capire meglio urge un esempio. 
Prendiamo i dati che abbiamo utilizzato nell'esempio del capitolo pre- 
cedente e trasformiamoli in un documento XM L che salveremo in 
una cartella comedata.xml: 

<root> 

<persona nome- 1 Mario" cognome=" Rossi" indirizzo=" via Dante 2 
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Milano"/> 

<persona nome=" Alfredo" cognome=" Bianchi" indirizzo=" via Verga 

5 Firenze" /> 

<persona nome=" Giovanni" cognome=" Verdi" indirizzo=" via 

Foscolo 10 Roma"/> 
<persona nome=" Francesco" cognome=" Gialli" indirizzo=" via 

Pascoli 7 Napoli" /> 



Internet Explorer 

Vediamo come Internet Explorer consente di accedere ai dati come 
oggetto DOM : 

function apriDomlE(docPath){ 

var objDOM = new ActiveXObject(" M sxml2.DOM Document" ); 
objDOM .async=false 
objDOM. load(docPath); 
return objDOM; 



In pratica si instanzia l'engine nativo M SXM L, installato nei sistemi 
Windows, e si utilizza il metodo load per caricare il documento. 
I dati sono stati caricati in modo sincrono, il flusso cioè aspetta fino 
a che il caricamento non viene completato, ma IE offre anche la pos- 
sibilità di caricamenti asincroni: 

var xmlDoc=null; 

function apriDomlEAsync(docPath){ 
xmlDoc=newActiveXObject("Msxml2.DOMDocument"); 
xmlDoc.onreadystatechange = readystatechange; 
xmlDoc.load(docPath); 



} 
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var state = xmlDoc.readyState; 
if (state == 4) { 

var nome = xmlDoc.documentElement.firstChild.getAttribute(" nome" ); 
alert(nome); 

} 

} 

apriDomlEAsync(" data. xml" ); 

In pratica l'oggetto viene dichiarato a livello globale (variabile xml- 
Doc) e nella funzione che lo istanzia è associata una funzione di cal- 
Iback all'evento onload quindi viene fatto partire il caricamento, 
quando esso termina viene eseguita la funzione di callback con sul- 
l'oggetto che nel frattempo sarà stato valorizzato. 

Firefox 

In Firefox invece il caricamento del file XM L avviene in sempre mo 
do asincrono, quindi avremo: 

var xmlDoc=null; 
function apriDomFF(docPath){ 
var state = 0; 

xmlDoc = document.implementation.createDocument(" " , "" , nuli) 

xmlDoc. onload = Joaded; 

xmlDoc.load(docPath); 

} 

function Joaded(){ 
var nome = 

xmlDoc. documentElement.firstChild.getAttribute(" nome" ); 
alert(nome); 

} 

apriDomFF(" data. xml" ); 
Asincrono o sincrono? 
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I puristi affermano che l'implementazione di Firefox è la migliore il 
caricamento asincrono consente di non bloccare l'interfaccia uten- 
te mentre si stanno caricando i dati da un file remoto. 
In parte ciò è vero, ma a volte nella vita reale le cose sono un po' di- 
verse. 

Pensate ad un caso niente affatto ipotetico: una funzione deve ca- 
ricare un piccolo file XM L contenente le preferenze dell'utente, leg- 
gerle e individuare la path di un file di dati più grande e caricarlo. 
Con solo il metodo asincrono avremmo due caricamenti in succes- 
sione, con due callback nidificati e con un notevole aumento della com- 
plessità del codice (per niente giustificato, visto che il primo file era 
solo di pochi Kb). 

Quindi, siamo d'accordo che il metodo asincrono è generalmente il 
migliore, ma perché non lasciarci la possibilità di scegliere? A volte 
l'interfaccia utente deve rimanere bloccata fino a che non abbiamo 
acquisito i dati! 

Caricamento di XML da una stringa 

Abbiamo visto come caricare un file XM L, ma a volte potrebbe essere 
necessario creare un oggetto DOM da una stringa XM L in memo- 
ria. 

Anche qui (verrebbe da dire :" naturalmente" ) i metodi adottati dai 
vari browser sono diversi. 

Internet Explorer 

In Internet Explorer il caricamento da stringa si fa con il metodo 
IoadXml dell'oggetto DOM Document, ovvero: 

functionloadXmllEIH 

varxmlDoc = new ActiveXObject(" Msxml2. DOM Document" ); 
xmlDoc.async = false; 

s ='<rootxpersona nome=" Mario" cognome=" Rossi" 
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s+- <persona nome=" Alfredo" cognome- 1 Bianchi" 
indirizzo=" ..."/>'; 

s+=' <persona nome=" Giovanni" cognome=" Verdi" 

indirizzo=" via Foscolo 10 Roma"/>'; 
s+=' <persona nome=" Francesco" cognome- 1 Gialli" 

indirizzo=" via Pascoli ..."/>'; 

s+='</root>'; 
xmlDoc.loadXml(s); 
var nome = 

xmlDoc. documentElement.fi rstChild.getAttributef 1 nome" ); 
alert(nome); 

} 



Firefox 

In Firefox invece si invoca un oggetto DOM Parser, ovvero: 



function loadXmlFF(){ 

s ='<rootxpersona nome="Mario" cognome=" Rossi" 

indirizzo=" via Dante 2 Milano" />'; 
s+=' <persona nome=" Alfredo" cognome=" Bianchi" 

indirizzo=" ..."/>'; 
s+=' <persona nome=" Giovanni" cognome=" Verdi" 

indirizzo=" via Foscolo 10 Roma"/>'; 
s+=' <persona nome=" Francesco" cognome- 1 Gialli" 

indirizzo=" via Pascoli ..."/>'; 

s+='</root>'; 

var objDOM Parser = new DOM Parser)); 

var xmlDoc = objDOM Parser.parseFromStringfs, " text/xml" ); 

var nome = 

xmlDoc. documentElement. fi rstChild.getAttributeC nome" ); 
alert(nome); 

} 
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Manipolazione dei dati 

In qualsiasi modo abbiate ottenuto il vostro oggetto DOM potete fi- 
nalmente star sicuri che proprietà e metodi standard saranno di- 
sponibili: infatti malgrado le differenze nel caricamento dei dati l'og- 
getto che ne risulterà avrà certamente quelle caratteristiche di cui 
abbiamo parlato prima. 

Ci saranno quindi i metodi per leggere e impostare gli attributi (ge- 
tAttribute e setAttribute), gli insiemi di elementi e nodi di testo child- 
Nodes, i metodi per creare nuovi elementi (createElement) e ag- 
giungerli a nodi esistenti (appendChild) e così via... 
Tuttavia, con il solo DOM XM L, una cosa risulta particolarmente sco- 
moda: trovare il riferimento ad un nodo o ad un insieme di nodi. 
Pensate dover trovare tutti gli elementi <libro> appartenti al repar- 
to "Classici" in un file come questo: 

<?xml version=" 1.0" ?> 
<biblioteca> 

<reparto nome- 1 Classici" > 
<libro> 

<autore>Omero</autore> 

<titolo>Odissea </titolo> 
</libro> 
<libro> 

<autore>Omero</autore> 
<titolo>lliade</titolo> 
</libro> 
</reparto> 

<reparto nome=" Fantasy" > 



<autore>J.R.R.Tolkien</autore> 
<titolo>ll signore degli Anelli</titolo> 
<editore>Mondadori</editore> 
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</reparto> 
</biblioteca> 

in javascript dovreste scrivere qualcosa tipo : 
var doc = IoadXml (" biblioteca. xml" ); 
var reparti = doc.getElementsByTagl\lame(" reparto" ) 
for(i=0;i<reparti.length;i++){ 
var reparto = reparti[i]; //nodo <reparto> 
if( reparto.getAttributeC nome" )==" Classici" ) { 
var libri = reparto. getElementsByTagl\lame(" libro" ) 
for(j=0;j<libri.length;j++){ 
var libro = libri[j]; //nodo <libro> 
//... 

} 

} 

} 

cioè implementare una serie di cicli nidificati con regole interne di con- 
fronto per selezionare le informazioni. 
No. Decisamente serve qualcosa di più pratico ... 
Per vostra (e nostra) fortuna esiste XPath che è un linguaggio simi- 
le a quello che per SQL sono le query di selezione. 



3.3XRATH 

XPath è dotato di una sintassi basata sui percorsi (Path appunto) 
che consente di selezionare e filtrare i nodi in base alla loro posi- 
zione, ai loro attributi ecc.. 

La sua filosofia sta nel tradurre tutto in path, nel file che abbiamo vi- 
sto in precedenza, ad esempio, i nodi <lìbro> hanno tutti la path: bi- 
blioteca/reparto/libro e attraverso questa path sarà possibile ottenere 
un insieme di nodi (nodeList). 
relazioni tra i n o effe 

XPath prende in considerazione innanzitutto le relazioni tra i nodi 
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che possono essere : 

• Parent - ogni Element (tranne quello radice) ,Attribute o TextNo- 
de ha un genitore 

• Children - i nodi di tipo Element possono avere uno o più nodi fi- 
gli 

• Siblings - i nodi di tipo Element hanno una relazione Sibling con 
gli elementi di pari livello. 

• Ancestor - sono Ancestors (ascendenti) di un elemento tutti gli 
elementi che lo precedono, fino alla radice (che è il primo ele- 
mento) 

• Descendants - sono Descendants (discendenti) di un elemento 
tutti gli elementi che racchiude 

Selezione dei nodi 

XPath è espressione di un percorso (come le path del sistema ope- 
rativo) in un documento XML. 

Il nodo è selezionato seguendo il suo percorso. Ecco alcune delle 
"path expressions" più utilizzate: 





Descrizione 


nome 


Seleziona tutti gli elementi figli del nodo con il nome 
corrispondente a quello indicato 


/ 


Seleziona dal nodo radice 


// 


Seleziona i nodi nel documento dal nodo corrente che 
corrisponde alla selezione indipendente dalla posizione in 
cui siamo 




Seleziona il nodo corrente 




Seleziona nodo Parent del nodo corrente 


@nome 


Rappresenta un attributo con il nome corrispondente a 



Esempi : 
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path expression 


Risultato 


/biblioteca 


Tutti i nodi <biblioteca> a partire dalla radice 


/biblioteca/reparto 


Seleziona tutti i nodi < reparto sotto a 
<biblioteca> a partire dalla radice 


//autore 


Seleziona tutti i nodi <autore> indipendentemente 
da dove si trovino 


//titolo/@lingua 


Seleziona l'attributo lingua di tutti i nodi <titolo> 



Predicati 

I predicati sono usati per trovare un nodo specifico o un nodo che con- 
tiene (o ha un attributo che contiene) un dato valore. 
I predicati devono essere contenuti in parentesi quadre []. 



Esempi: 



path expression 


Risultato 


/biblioteca/reparto [1] 


Seleziona il primo nodo <reparto> sotto a 
<biblioteca> 


/biblioteca/reparto [lastQ] 


Seleziona l'ultimo nodo <reparto> sotto a 
<biblioteca> 


//titolo[@lingua='en'] 


Seleziona i nodi <titolo> che hanno l'attributo 
"lingua" con valore "en" 


//I i bro [tito 1 o/@ 1 ing u a = ' en ' ] 
/autore 


Seleziona i nodi <autore> sotto <libro> che ha 
l'attributo "lingua" con valore "en" 
nell'elemento <titolo> 



s 



Selezionare nodi non conosciuti 

Dei metacaratteri (wildcards) possono essere usati al posto del no- 
me del nodo 



Espressione 


Descrizione 


* 


Qualsiasi elemento 


@* 


Qualsiasi attributo 


node() 


Qualsiasi nodo di ogni tipo 
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Esempi: 



patti expression 


Risultato 


/biblioteca/* 


Seleziona tutti gli elementi sotto a <biblioteca> 
indipendentemente dal nome 


/biblioteca/reparto/®* 


Seleziona tutti ali attributi di <reparto> sotto a 




Selezioni multiple 

L'utilizzo dell'operatore 


'|" in XPath consente selezioni in più percorsi. 


Esempi: 




patti expression 




//libro/titolo | 
//libro/autore 


Seleziona sia <titolo> che <autore> sotto a 
<libro> 



3.4 XFVYTH E JAVASCRIPT 

A noi, per AJAX, XPath interessa ovviamente dal punto di vista client- 
side e quindi con Javascript. Come per DOM anche per XPath java- 
script si affida al motore offerto dal browser e quindi anche qui ab- 
biamo modi di accesso diversi (la sintassi delle espressioni natural- 
mente non cambia) tra Internet Explorer e Firefox. 

Internet Explorer 

Internet Explorer usa il motore XPath integrato nella stessa libreria 
di DOM XM L, in quest'ultimo ogni nodo di tipo document o di tipo 
element ha disposizione due metodi : 

• selectNodes - per selezionare, data un'espressione XPath, una 
nodeList. 

• selectSingleNode - per selezionare, data un'espressione XPath, 
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un singolo nodo. 

Per selezionare un nodo <persona> il cui attributo nome sia ugua- 
le a " M ario" dal file data.xml che raccoglieva la lista di indirizzi che 
abbiamo visto in precedenza in Internet Explorer è sufficiente: 

function selezionalE(docPath){ 

var objDOM = new ActiveXObject(" Msxml2.DOMDocument" ); 
objDOM.Ioad(docPath); 

var node = objDOM .selectSingleNode("//persona[@nome='Mario']" ); 
return node; 

} 

per selezionare invece la lista di nodi <persona> : 

function selezionaListalE(docPath){ 

var objDOM = new ActiveXObject(" M sxml2.DOM Document" ); 
objDOM. load(docPath); 

var nodes = objDOM .selectNodesf //persona" ); 
for(var i=0;i<nodes.length;i++){ 

var node = nodesp]; 

//fai qualcosa con il nodo 

} 

} 

Firefox 

In Firefox le cose sono ben diverse, XPath richiede un Namespace 
Resolver e una serie di altri parametri, poi occorrerà implementare la 
funzione come callback. Questo è il codice per la selezione di una no- 
deList : 

var xmlDoc=null; 

function apriDomFF(docPath){ 
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xmlDoc = document.implementation.createDocument(" " , " " , nuli) 

xmlDoc.onload = _loaded; 

xmlDoc.load(docPath); 



function Joaded(){ 
var NSResolver = 

xmlDoc.createNSResolver(xmlDoc.documentElement); 
varoResult = xmlDoc.evaluate(" //persona", 
xmlDoc, 



XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, nuli); 
f o r( i = 0 ; i< oResult.snapshotLength; i++) { 
var node = oResult.snapshotltem(i); 
//fai qualcosa con il nodo 

} 

} 

3.5 XMLHTTPREQUESr 

L'ultimo (ma forse il più importante) tra gli strumenti per AJAX che 
andiamo ad analizzare è XMLHttpRequest ovvero quell'oggetto che 
consente di inviare una richiesta (request) HTTP al server e ricevere 
una risposta (response). 

A prima vista XM LHttpRequest sembrerebbe un doppione dei vari 
metodi per caricare un documento XM L che abbiamo già visto par- 
lando del DOM. 

Si potrebbe pensare infatti che per ricevere un documento XM L sia 
in fondo sufficiente invocare il metodo load dell'implementazione 
DOM del browser. 

In realtà le cose stanno in modo ben diverso, il load del DOM infat- 
ti : 

1. effettua solo richieste http di tipo GET e non POST 
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2. non consente (o lo consente in maniera troppo limitata) 
l'invio di parametri al server 
In sostanza effettuare il load di un documento XM L dal server (an- 
che se quest'ultimo fosse generato dinamicamente) consente sola- 
mente un flusso unidirezionale server/client, il client non invia infor- 
mazioni al server ma si limita a riceverle. 
In qualche caso questo può essere sufficiente, ma in applicazioni 
AJ AX interattive tipicamente è il client a condizionare (in base ai pa- 
rametri che invia nella request ) le informazioni che poi riceve. 
Inoltre il metodo POST non soffre delle limitazioni alla lunghezza 
imposte invece al metodo GET e quindi risulta più utile per inviare una 
grande quantità di informazioni. 

Per supportare AJ AX ci serve qualcosa di più robusto e affidabile del 
semplice load di XM L e XM LHttpRequest fa appunto al caso nostro. 
Anche l'oggetto XM LHttpRequest come DOM e XPath deriva da uno 
standard definito dal W3C quindi i metodi e le proprietà che espo- 
ne sono gli stessi, e cioè: 



Proprietà 



onreadystatechange 


Associa un gestore di evento da chiamare quando 
cambia la proprietà readyState 


readyState 


Codice numerico che rappresenta lo stato della 
richiesta. 


responseText 


Risposta del server in forma di stringa. 


responseXM L 


Risposta del server in forma di oggetto DOM XM L. 


status 


Il codice numerico di status HTTP ricevuto dal server. 


statusText 


Descrizione dello status HTTP ricevuto dal server. 
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Metodi 



abort 


Cancella la richiesta HTTP in corso. 


getAIIResponseHeaders 


Recupera i valori di tutti gli headers HTTP. 


getResponseHeader 


Recupera il valore di un header HTTP dalla risposta. 


open 


Inizializza una richiesta specificando il metodo, la 
URL e la modalità (sincrona o asincrona) della 
richiesta. 


send 


Invia una richiesta HTTP al server (con i parametri) 
e riceve una risposta. 



Il flusso di una richiesta sincrona con XM LHttpRequest è: 

• creare un istanza dell'oggetto XM LHttpRequest 

• invocare il metodo open con i parametri metodo, uri e il valore 
false per qualificare le richiesta come sincrona 

• se la richiesta è di tipo POST utilizzare setRequestHeader per im- 
postare l'header HTTP " Content-Type" sul valore " application/x- 
www-form-urlencoded" 

• invocare il metodo send con il parametro body che contiene i va- 
lori da inviare al server 

• recuperare la risposta con la proprietà responseText o respon- 
seXML 

Il flusso di una richiesta asincrona con XM LHttpRequest è: 

• creare un istanza dell'oggetto XM LHttpRequest 

• assegnare una funzione di callback attraverso la proprietà on- 
readystatechange 

• invocare il metodo open con i parametri metodo, uri e il valore 
false per qualificare le richiesta come sincrona 

• se la richiesta è di tipo POST utilizzare setRequestHeader per im- 
postare l'header HTTP "Content-Type" sul valore " application/x- 
www-form-urlencoded" 

• invocare il metodo send con il parametro body che contiene i va- 
lori da inviare al server 
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• la funzione di callback verrà chiamata ad ogni cambiamento di 
stato della richiesta, all'interno di questa funzione ci dovrà esse- 
re il controllo della proprietà readyState ed il recupero, una volta 
accertato che readyState sia 4 (completed), della risposta con la 
proprietà responseText o responseXM L 

Non so lo XM L 

Una cosa importante da notare è che XM LHttpRequest può essere 
utilizzato per ottenere dal server non solo XM L well-formed, ma qua- 
lunque tipo di file di testo : HTM L, testo ASCII ecc.. 

I valori che può assumere readyState di XM LHttpRequest sono: 



(0) UNINITIALIZED 


L'oggetto è stato creato, ma non inizializzato(open non 
è stata invocata). 


(1) LOADING 


L'oggetto è stato creato, ma sena 1 non è stato invocato. 


(2) LOADED 


send è stato invocato, ma la risposta non è ancora 
disponibile. 


(3) INTERACTIVE 


Alcuni dati sono stati ricevuti. La proprietà responseText 
contiene parte dei dati. 


(4) COMPLETED 


Tutti i dati sono stati ricevuti e sono disponibili 
attraverso responseText o responseXM L. 



s 



I codici di status HTTP e i relativi valori di statusText (almeno quelli 
più probabili) che possiamo ricevere dal server sono: 



status 


statusText 


Success 




200 


OK 


201 


Created 


202 


Accepted 


203 


Non-Authoritative Information 


204 


No Content 


205 


Reset Content 


206 


Partial Content 


207 


M ulti-Status 
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Errors 




500 


Internai Server Error 


501 


Not Implemented 


502 


Bad Gateway 


503 


Service Unavailable 


504 


GatewayTimeout 


505 


HTTP Version Not Supported 



Nota importante 

Le versioni attuali di XM LHttpRequest non consentono di connet- 
tersi a domini differenti rispetto a quello dove si trova lo script che 
instanzia l'oggetto, per cui se lo script si trova, ad esempio, in 
http://www.mioserver.com/client.html potrà richiedere dati solo ad 
una pagina o procedura che risiede nello stesso dominio (come 
http://www.mioserver.com/server.aspx ) e non in altri (come 
http://www.altroserver.com/server.aspx). 
Si afferma che questa limitazione sia dovuta a motivi di sicurezza 
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(anche se non si è ben capito quali possano essere). 
Se quella di connettersi a server esterni fosse proprio un'esigenza 
indispensabile (come il caso in cui sia necessario connettersi a un 
Web Service esterno) l'unica strada è quella dì creare una pagina 
con un linguaggio lato server che faccia da " proxy" : accetti cioè la 
richiesta dal client, la rigiri al server effettivo, recepisca la risposta e 
la reindirizzi nuovamente al client. 

Un esempio di questa tecnica in PHP è illustrato su http://develo- 
per.yahoo.com/javascript/howto-proxy.html . 



3.6 XMLHTTPREQUEST 
E JAVASCRIPT 

Per fortuna con XMLHttpRequest non ci sono tutti i problemi che 
abbiamo visto con DOM e XPath tra le diverse versioni dei browser. 
Le uniche differenze sono tra Internet Explorer 5 e 6 e gli altri brow- 
ser (fra cui Internet Explorer 7), i primi implementano XM LHttpRequest 
come oggetto ActiveX, mentre gli altri lo includono nel motore del brow- 
ser. 

Internet Explorer 5 e 6 

L'istanza di un oggetto XM LHttpRequest si effettua con il seguente 
codice: 



varreq = new ActiveX0bject("Msxml2.XMLHTTP"); 



Internet Explorer 7, Firefox e altri 

L'istanza è effettuata direttamente con l'operatore new 



var req = new XM LHttpRequestQ 



Una volta instanziata una XM LHttpRequest il funzionamento è iden- 
tico per tutti i browser. 

Vediamo quindi come gestire una richiesta sincrona in POST: 
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function getXM LHttpRequest (){ 

if (typeof(XM LHttpRequest) != 'undefined') { 
return new XM LHttpRequestf); 

} 

else { 

return new ActiveXObjectf" M sxml2.XM LHTTP" ); 

} 
} 

function sendSync (){ 

var req = getXM LHttpRequest.); 

req.open(" POST", "data. xml", false); 

req.setRequestHeader (" Content-Type" , " application/x-www-form- 
urlencoded"); 

req.send(""); 

return req.responseText; 

} 

e qui invece abbiamo una richiesta asincrona (la funzione getXM LHtt- 
pRequest sarà la stessa dell'esempio precedente): 

function sendAsync () { 

var req = getXM LHttpRequestO; 
varonreadystate = function (){ 
if (req.readyState == 4) { 
if (req.status == 200) { 

var risposta = req.responseText; 
//fare qualcosa con la risposta 



else { 

var errar = req.statusText; 
//si è verificato un errore 
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} 

else { 

//in attesa 

} 

} 

req.onreadystatechange = onreadystate; //assegnazione al callback 

interno 

req.openf' POST" , " data, xml" , true); 
req.setRequestHeader (" Content-Type" , 

" application/x-www-form-urlencoded" ); 

req.send(""); 



} 



si noti come abbiamo mantenuta compatta la funzione inserendo il 
callback come funzione interna. 



Invio di parametri al server 

Negli esempi precedenti nel metodo send abbiamo indicato una 
stringa vuota, questo perché si trattava semplicemente di scaricare 
un documento statico (il file data.xml), tuttavia in applicazioni AJAX 
la fonte XM L sarà probabilmente generata dinamicamente dal ser- 
verequindi avremo bisogno di passargli dei parametri (ad esempio 
per inviargli i dati di una form) questi parametri devono essere con- 
catenati in una stringa simile a quella che viene usata per le URL e 
cioè: 

<nome>=<valore>&<altro_nome>=<altro_valore> 

In javascript potremmo concatenare e inviare i parametri con: 

var params = "nome=Mario&cognome=Rossi&indirizzo=via verdi"; 
req.send(params); 
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Nel caso di variabili conviene però codificare i valori con encodeU- 
RlComponent per evitare caratteri riservati : 

function sendData (nome,cognome,indirizzo) { 

varparams= "nome=" + encodeURIComponent(nome) + 
"&cognome=" + encodeURIComponent(cognome) + 
" &indirizzo=" + encodeURIComponent(indirizzo); 

req.send(params); 

} 

3.7 UNA LIBRERIA JAVASCRIPT PER 
DOM, XFATH XMU-mPREQUESr 

A questo punto abbiamo tutti gli strumenti concettuali per gestire l'XM L, 
però non possiamo certo lavorare con due approcci completamen- 
te diversi all'XM L come quelli offerti da Internet Explorer e Firefox; 
a parte l'oggettiva difficoltà di destreggiarsi tra le varie sintassi, c'è 
anche da considerare che il nostro codice sarebbe disseminato di if 
ed estremamente prolisso. 

Quello che ci serve, a questo punto, è una libreria javascript intermedia 
che si occupi di offrire modalità di accesso uniche a XPath, DOM e 
XMLHttpRequest. 

3.8 COS'È UNA LIBRERIA 
JAVASCRIPT? 

Per chi non lo sapesse, una libreria javascript non è altro che un (o 
più) file che contengono codice javascript con funzioni di supporto. 
Nella pagina Web gli script presenti possono utilizzare le funzioni di 
una libreria inserendo uno script di riferimento al file che la contie- 
ne con : 
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<script src=" libreria Js" type=" text/javascript" ></script> 

in tal modo tutte le funzioni contenute nella libreria vengono rese di- 
sponibili agli script della pagina. 

Potete provare anche voi a fare la vostra libreria, scrivete del codice 
in un file che chiamerete ad esempio libreria.js (tipicamente il file di 
libreria ha estensione .js ma questa è solo una convenzione tacita, 
non una regola), ad esempio: 

function metodoLibreria(messaggio){ 
alert(messaggio) 

} 



Ricordate, nei file di libreria non devono essere inclusi iTAG <script>, 
solo il codice Javascript. .S 
Nella pagina HTML di destinazione sarà quindi possibile fare riferi- 
mento alla libreria: 

<html> 
<head> 

<script language=" javascript" type=" text/javascript" 

src=" libreria.js" ></script> 

</head> 

<bodyx/body> 

</html> 

a questo punto qualsiasi script della pagina potrà utilizzare la fun- 
zione metodoLibreria : 

<html> 
<head> 

<script language=" javascript" type=" text/javascript" 

src=" libreria.js" ></script> 
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<script language=" javascript" type=" text/javascript" > 
metodoLibreria ("Ciao a tutti!"); 

</script> 
</head> 
<body> 
</body> 
</html> 

cioè sarebbe stato un po' come scrivere: 

<html> 

<head> 



function metodoLibreria(messaggio){ 
alert(messaggio) 

} 

</script> 

<script language=" javascript" type=" text/javascript" > 
metodoLibreria ("Ciao a tutti!"); 

</script> 
</head> 
<body> 
</body> 



per chi è pratico di programmazione web lato server è un po' come 
quando si usa una direttiva include per far riferimento a codice che 
è comune a più pagine. 

3.9 CERCASI LIBRERIA 
JAVASCRIPT PER XML.. 

In rete ci sono diverse librerie javascript che fanno da Wrapper nei con- 
fronti dei vari browser, cioè in pratica forniscono delle funzioni che 
internamente chiamano quelle implementate dal browser. 
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Per essere ancora più chiari: abbiamo visto che l'istanza di un do- 
cumento DOM si crea con: 

Internet Explorer 

var objDOM = new ActiveXObject(" Msxml2.DOMDocument" ); 
Firefox 

var objDOM = document.implementation.createDocument(" " , " " , nuli) 

Una libreria wrapper offrirà quindi un metodo unico per creare un'i- 
stanza DOM, tipo: 

var objDOM = libreria. getDomDocumentO; .Q 



naturalmente la libreria svilupperà, al suo interno una funzione get- 
DomDocument che potrebbe essere (semplificando molto) un po' 
come questa: 

libreria. getDomDocument = function (){ 
if(islE) { 

return new ActiveXObjectf M sxml2.DOM Document" ); 

} 

else { 

return document. implementation.createDocument(" " , " " , nuli); 

} 

} 

cioè in pratica effettua il riconoscimento del browser e restituisce 
l'oggetto creato con il metodo nativo. 
Il vantaggio di questa tecnica è evidente: poter utilizzare metodi uni- 
voci senza preoccuparsi dell'implementazione del browser sotto- 
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stante. 
Sarìssa 

Una delle più diffuse librerie w rapper è Sa rissa (il nome deriverebbe 
da una lunga lancia usata dalle falangi M acedoni) che è scaricabile 
all'indirizzo https://sourceforge.net/projects/sarissa . 
Questa libreria offre appunto una serie di funzioni per XM L che si 
sostituiscono a quelle del browser. Vediamo quali. 

Creazione di un'istanza DOM XML 

È sufficiente richiamare il metodo: 

varobjDom = Sarissa.getDomDocumentO; 

è possibile chiamare questa funzione anche con due parametri che 
rappresentano il default namespace e il nome dell'elemento radice: 

var objDom = Sarissa.getDomDocument(" http://xml.org/test" ," root" ); 
creando così in memoria un documento XM L tipo: 
<rootxmlns=" http://xml.org/test-x/root> 

Caricare un documento DOM XML da una stringa 

Si utilizzerà in questo caso l'oggetto DOM Parser di Sarissa in questo 
modo: 

varobjDom = Sarissa.getDomDocumentO; 
var xmlString = " <root>my xml! </root>" ; 
objDom = (new DOM Parser))). parseFromStringfxmlString, "text/xml"); 

Creare un'istanza di XMLHttpRequest 

L'istanza viene richiamata semplicemente attraverso: 
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Utilizzando poi l'oggetto come abbiamo visto in precedenza. 

Caricare un documento DOM XML da un file 

È possibile effettuare il caricamento sìncrono o asincrono del file 
sebbene sia disponibile anche il metodo load per DOM XM L che 
emula quello di M icrosoft esso è deprecato dagli autori e potrebbe 
non essere presente nelle future versioni, essi consigliano di usare XM LHtt- 
pRequest. 

In modo sincrono sarà quindi: 

varxmlhttp = new XM LHttpRequestO; 
xmlhttp.open("GET" , " data. xml" , false); 
xmlhttp.sendf); 

var objDom = xmlhttp.responseXM L; 
e in modo asincrono: 
function loadDoc(){ 

varxmlhttp = new XM LHttpRequestO; 

xmlhttp.openC'GET" , "data. xml" , true); 

xmlhttp.onreadystatechange = myHandler; 

xmlhttp.sendC); 

function myHandler(){ 

iffxmlhttp.readyState ! = 4) return ; 
var objDom = xmlhttp.responseXM L; 

} 

} 

Ottenere una stringa da un nodo XML 

A volte può essere necessario, soprattutto in fase di debug, control- 
lare i dati ricevuti e trasformare quindi il documento XM L in una 
stringa, magari da visualizzare con un'alert. 
Per svolgere questo compito Sarissa prevede : 




varstrXml = new XMLSerializer().serializeToString(objDom) 
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Effettuare una ricerca XPath 

Per XPath Sarissa ricalca il modello usato da M icrosoft, abilitando i 
metodi selectNodes e selectSingleNode anche per gli altri browser, 
per cui la ricerca si presenta semplice: 

varobjDom = xmlhttp.responseXML; 

var list = objDom. selectNodes ("//persona" ); 

s = " " ; 

for(var i=0;i<list.length;i++){ 

s + =list[i].getAttribute("norne") + "\r\n"; 

} 

alert(s); 
jsXML 

Sarissa è una bellissima libreria, con il vantaggio di essere anche 
molto diffusa, ci sono però alcuni svantaggi: 

• Alcuni metodi (vedi il caricamento di file esterni) sono un po' pro- 
lissi e quindi richiederebbero ulteriori funzioni per semplificarne l'u- 
tilizzo. 

• L'insieme del gruppo di librerie di Sarissa ha una dimensione di 
circa 60Kb, il che non è molto in senso assoluto, tuttavia può di- 
ventare un problema in applicazioni che già hanno altre librerie da 
includere; bisogna infatti ricordarsi che anche i file di libreria, co- 
me i CSS, le immagini ecc. contribuiscono a far lievitare il "pe- 
so" della pagina che il client deve scaricare portando facilmente 
una pagina a " pesare" 200/300 Kb, ricordatevi che non tutti han- 
no l'ADSL... 

Queste considerazioni mi hanno portato a sviluppare una libreria 
personale per AJAX che ho chiamato jsXML, scaricabile dal sito: 
http://www.smelzo.it . 
I principi su cui si basa questa libreria sono: 

• Semplificare il più possibile le cose 
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• Ridurre le dimensioni (attualmente 11Kb) 
Per arrivare alla semplificazione si è scelto la strada di emulare, an- 
che per Firefox, il modello proposto da M icrosoft, è vero che que- 
st'ultimo non è il massimo di aderenza agli standard del W3C tuttavia 
lo ritengo estremamente più intuitivo e sintetico. 
Sempre nell'ottica della semplificazione, si sono implementati dei 
metodi che consentono di fare delle operazioni con una sola riga di 
codice. 

Alla riduzione (ad un sesto di Sarissa) si è arrivati invece con la scel- 
ta di limitarsi alla compatibilità con Internet Explorer e Firefox (mol- 
te funzioni lavorano tuttavia correttamente anche in Opera); questo 
può anche sembrare poco " politi cally correct" tuttavia c'è da consi- 
derare IE e Firefox insieme coprono ormai quasi il 98% del mercato 
e praticamente tutti i sistemi operativi e che le applicazioni AJAX 
vengono usate soprattutto in parti del sito "controllate" come fo- 
rum, amministrazione ecc.. dove cioè si ha un certo " potere" di in- 
dirizzamento verso l'uso di un certo browser. 
Vediamo quindi come compiere le più comuni operazioni con XM L 
con jsXML. 

Creazione di un'istanza DOMI XML 

Una nuova istanza si ottiene semplicemente con : 

var objDom= jsXM L.newDOM Documento; 

Caricare un documento DOM XML da una stringa 

Anche qui si semplificano le cose riunendo creazione di un'istanza e 
caricamento da stringa in un'unica funzione: 

var objDom= jsXM L.parseXM LDocument(strXml); 

dove il parametro sarà ovviamente la stringa XM Lsu cui costruire il 
nuovo documento 
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Gestione XMLHttpRequest 

Essendo un'operazione frequentissima in AJAX le operazioni XMLHtt- 
pRequest sono completamente gestite da funzioni di utilità. 
Per una richiesta sincrona: 

varstrXML = jsXML.sendSync ("data. xml" ,"paraml=X&param2=Y"); 

in questo, come in altri casi la richiesta dà una risposta in forma di 
stringa e non di XM L per permettere di gestire anche risorse non 
XML. 

Il primo parametro è l'URL della risorsa e il secondo sono i valori da 
inviare eventualmente al server , di default la richiesta è effettuata 
con POST ma si può utilizzare anche un altro metodo specificando- 
lo come terzo parametro: 

var strXM L = jsXM L.sendSync 

(" data. xml" ," paraml=X&param2=Y" ,"GET" ); 

Nel caso che invece di una risposta come stringa si desideri ottene- 
re direttamente una risposta come oggetto DOM XM L è sufficiente 
usare jsXM Ldirect: 



Per la richiesta asincrona il metodo base è: 

jsXM L.sendAsync ("POST", "data.xml","paraml=X&param2=Y", 
successHandler,errorHandler,waitHandler); 



function successHandler(strXML) { 
//fai qualcosa con strXML 
} 
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function errorHandler (statusText) { 
// fai qualcosa con statusText 
} 

//callback waitHandler 
function errorHandler (readyState) { 
//fai qualcosa con readyState 
} 

come avrete intuito, il primo parametro è il metodo utilizzato, il se- 
condo e il terzo sono URL evalori da inviare e i restanti tre sono ri- 
ferimenti a funzioni di callback : la prima viene invocata in caso di suc- 
cesso e riceve come parametro la risposta come stringa XM L, la se- 
conda viene invocata in caso di errore e riceve come parametro il 
messaggio di errore http, l'ultima viene invocata mentre si attende 
la risposta e può essere utile per mostrare un messaggio di attesa. 
Dei tre callback è obbligatorio solo il primo. 
Per semplificare ulteriormente si hanno anche altre due funzioni sa- 
tellite che indirizzano direttamente verso la chiamata GET o POST 
eliminando il primo parametro: 

jsXM L.sendAsyncGet (" data. xml" ," paraml=X&param2=Y" , 
successHandler,errorHandler,waitHandler); 

e 

jsXM L.sendAsyncPost (" data. xml" ," paraml=X&param2=Y" , 
successHandler,errorHandler,waitHandler); 

Caricare un documento DOM XML da un file 

Si riproduce completamente il metodo load di M icrosoft per cui è 
sufficiente: 

var objDom= jsXM L.newDOM Documenti); 
objDom.load ("data. xml"); 
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Addirittura c'è una funzione (openDOM Documenti che fa tutto in un 
colpo solo: 



Ottenere una strìnga da un nodo XML 

Anche qui si è seguita la strada di M icrosoft per cui per ogni nodo do- 
cumento o elemento è sufficiente richiamare la proprietà xml: 



var strXM L = objDom.xml; //per l'intero documento 




Effettuare una ricerca XPath 

Come in Sarissa si sono collegate le query XPath ai metodi selectNodes 
e selectSingleNode e quindi: 

var objDom= jsXM L.newDOM Documenti); 
objDom.load ("data. xml"); 
var list = objDom. selectNodes ("//persona" ); 
s = " " ; 

for(var i=0;i<list.length;i++){ 

s += I ist [ i ] . getAttri b u te( " nome" ) + "\r\n" ; 

} 

alert(s); 

google-ajaxslt 

Un'altra libreria per AJAX è google-ajaxslt (http://code.google.com/p/ajax- 
slt ), la citiamo più per l'approccio particolare che adotta che per la 
reale praticabilità. 

Il progetto è un'implementazione di XPath e XSLT fatta completa- 
mente in Javascript! Cioè un'impresa a dir poco "titanica" . 
La scelta dei progettisti di questa libreria è quella di non appoggiarsi 
per nulla alle implementazioni native di DOM XM L, XPath e XSLT 
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ma di riscriverli da zero (e per giunta in Javascript! ) eliminando così 
alla radice il problema delle differenze tra i vari browser. 
Agli scopi pratici la libreria non è ancora ad uno stadio " maturo" , un 
po' perché mancano una serie di funzioni indispensabili, un po' per- 
ché più orientata a XSLT che in AJAX può sì avere un ruolo, ma non 
proprio di primo piano. 

L'idea infatti sarebbe di trasformare l'input XM L ricevuto dal server, 
attraverso XSLT, in codice HTM L, questo approccio può andare bene 
per del contenuto statico, ma se nella fase intermedia tra acquisi- 
zione e creazione del contenuto si dovessero impostare elementi 
HTM L con gestori di eventi questo approccio non andrebbe più be- 
ne. 

Comunque il progetto è veramente notevole per lo stile e l'abilità di 
scrittura, una vera miniera di spunti; i programmatori un po' più 
esperti di Javascript farebbero bene a dare almeno un'occhiata ai 
sorgenti. 




Tutt'altra strada è quella intrapresa dalla Microsoft AJAX Library, la 
librerìa Javascript client-side che è parte del più ampio progetto 
ASP.N ET AJAX (http://ajax.asp.net ). Sebbene sia concepita per essere 
la parte client di un sistema che prevede l'integrazione di alcuni nuo- 
vi Web Controls perASP.NET (ne parliamo più avanti nel capitolo 
" Finalmente AJAX" ), la libreria può essere utilizzata anche autono- 
mamente daASP.NET cioè anche con altri linguaggi. 
La sua filosofia è un po' quella di Sarissa, ovvero creare un wrapper 
delle funzioni native per XM L dei vari browser in circolazione, tutta- 
via per farlo mette in piedi una gigantesca API dove c'è addirittura 
un tentativo di tipizzazione di un linguaggio di scripting, per natura 
non tipizzato, come Javascript. 

Il risultato è indubbiamente molto Object Oriented, tuttavia se lo 
scopo era quello di semplificare le cose sembra proprio che siamo lon- 
tani dall'obbiettivo. 
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Il lato positivo di M icrosoft AJAX Library è che funziona anche con 
Opera e Safari, ma allora - secondo me - conviene usare Sarissa 
che ha un'API decisamente più intuitiva. 



3.10 METTIAMO TUTTO INSIEME 

Con quello che abbiamo appreso su XM L e la sua gestione con Ja- 
vascript torniamo adesso all'esercizio che abbiamo visto nel primo ca- 
pitolo affrontando lo stesso problema con la differenza che questa 
volta dovremo riuscire a caricare i dati dal file XM L esterno. 



Problema 

Creare una pagina HTM L con un BUTTON e un DIV vuoto. 
Sull'evento click associato al BUTTON si deve compiere questa azio- 
ne: 

• Se il DIV è vuoto creare unaTABLE, leggendo i valori dal file ester- 
no data. xml presente nella stessa directory, e inserirla sotto di es- 
so 

• Se il DIV è nascosto visualizzarlo, viceversa se è visibile nasconderlo 



Soluzione 

Passo 1 - creare la pagina HTML 

In un editor di testo creiamo la pagina HTM L che abbiamo utilizza- 
to in precedenza, ma con l'aggiunta di un riferimento ad una libre- 
ria di funzioni perXM L (in questo caso jsXM L) : 



<html> 
<head> 



<script language=" javascript" type=" text/javascript" 

src=" jsXM L.js" ></script> 
<script language=" javascript" type=" text/javascript" > 
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</script> 
</head> 
<body> 

<button id=" btnl" onclick=" cliccami!)" >Clicca qui per vedere la 
tabella! </button> 

<div id=" container" style="display:none" ></div> 
</body> 
</html> 



Passo 2 - codice DOMI per la creazione della tabella 

Questa è la funzione che subisce maggiori cambiamenti perché que- 
sta volta la sorgente dei dati è un file XM L che dovrà essere carica- 
to e letto conXPath: 

function createTable(){ .3 
//definizione dati tabella 
//prima riga 

var headers = [" nome" ," cognome" ," indirizzo" ]; 

var objDOM = jsXM L.openDOM Documenti" data, xml" ); 

var nodes = objDOM .selectl\lodes(" //persona" ); 

var oTable = document.createElement("TABLE" ); 

//proprietà tabella 

oTable.width = "400"; 

oTable.celISpacing = "0"; 

oTable.celIPadding = " 2" ; 

//prima riga 

var oTr = oTable.insertRow(-l); 
for(var i=0;i<headers.length;i++){ 

var oTd = oTr.insertCell(-l); 

oTd.align=" center" ; 

oTd.background = " #EEEEEE" ; 

oTd.style.font = " bold 12px arial" ; 

oTd.style.borderBottom = " lpx solid #666666" ; 
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oTd.innerHTM L= headers[i]; 

} 

//righe dati 

for(var i=0;i<nodes.length;i++){ 

var node = nodes[i]; 

var oTr = oTable.insertRow(-l); 

for(var n=0;n<headers.length;n++){ 

varoTd = oTr.insertCell(-l); 

oTd.style.font = " 12px verdana" ; 

oTd.style.borderBottom = 11 lpx solid #999999" ; 



} 

} 

currentTable = oTable; 

var container = document.getElementByld(" container"); 
container.appendChild(currentTable); 

} 

in pratica : 

• apriamo il documento XM L 

• estraiamo con XPath i nodi <persona> 

• nel ciclo di costruzione della tabella leggiamo i vari attributi con 
getAttribute 

le altre parti del programma sono uguali a quanto visto nel primo ca- 
pitolo e anche il risultato è il medesimo. 
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LATO SERVER 

Dopo aver trattato il più diffusamente possibile le problematiche client- 
side legate a javascript, HTM L DOM e XM L, dobbiamo adesso prende- 
re in esame l'altro importante attore di AJAX: il lato server. 
Infatti, pur ridotto nell'importanza rispetto alle Web Applications tradi- 
zionali, il server continua ad avere una funzione basilare : quella di sor- 
gente di dati. 

In AJAX, come abbiamo detto, abbiamo un colloquio ben definito tra 
gli script che ci sono nella pagina, un ciclo molto simile per certi aspet- 
ti a quello delle applicazioni client/server tradizionali: 

1. clienti: server - richiesta dati 

2. serverj:client- invio dati 

3. client- elaborazione dati e cambiamenti all'interfaccia utente 

Da quanto abbiamo visto finora con XM LHttpRequest dovremo essere 
in grado di inviare una richiesta al server e quindi assolvere al punto 1. 
M a siamo anche in grado di manipolare adeguatamente con javascript 
sia un documento XM L (con il DOM e XPath) che l'output HTM L (con il 
DOM HTM L e i CSS) e quindi siamo pronti anche per il punto 3. 
Quello che ci manca è quindi soltanto il punto 2 : costruire una risposta 
dal lato server (che, ovviamente, dovrà essere un flusso XM L). 
Il 99% delle operazioni che restano da fare al server riguardano ì dati 
(che siano database, file XM L o file di testo non ha importanza) e sono, 
tipicamente: 

• selezione 

• inserimento 

• modifica 

• cancellazione 

Ogni sviluppatore avrà naturalmente il suo linguaggio preferito per com- 
piere queste operazioni lato server, noi partiremo comunque da un pro- 
blema specifico da risolvere per vedere come implementare soluzioni 
in diversi linguaggi, questo naturalmente è solo un esempio, in applicazioni 
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reali le cose potrebbero essere più complesse, tuttavia negli esempi che 
faremo cercheremo di toccare le problematiche principali. 

41 IL PROBLEMA 

Abbiamo un database, il buon vecchio Northwind il database di esem- 
pio della M icrosoft, che si trova in tutte le edizioni di Access e anche in 
qualche distribuzione di SQL Server; per collegarsi a Northwind utilizzeremo 
ODBC (in modo da mantenersi il più neutrali possibile rispetto al tipo di 
database di origine), vogliamo selezionare i dati dalla tabella Custo- 
mers (clienti). 

Questa selezione sarà influenzata, nella quantità di dati restituiti, dal- 
l'input dell'utente che potrà: 

• impostare una stringa di ricerca 

• impostare il campo dove effettuare la ricerca 

Si tratta quindi di predisporre una pagina server-side che si connetta al 
Database ODBC, trasmetta la query costruita in base alle impostazioni 
dell'utente, recuperi i dati e li trasmetta come response XM L. 
La connessione ODBC avrà come nome NWIND. 

42 FACCIAMOLO IN PHP 

Creiamo sul server un file che chiameremo server.php, il file sarà solo co- 
dice (non conterrà quindi HTM L) e cominciamo con la connessione. 

La connessone 

Il meccanismo di connessione sfrutta le funzioni ODBC integrate nel lin- 
guaggio e segue più o meno questo schema: 

//connessione al database 

$connectionstring = odbc_connect(" NWIND", "xx", "xx"); 
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$Query = " SELECTCompanyName, ContactName, Address, City, Country FROM 

Customers " ; 

//recupero dati 

$queryexe = odbc_do($connectionstring, $Query); 
//lettura dati 

while(odbc_fetch_row($queryexe)) { 
//lettura campi 

$cname = odbc_result($queryexe, "CompanyName"); 
} 

//disconnessione dal database 
odbc_close($connectionstring); 

quindi : 

• connessione 

• impostazione query 

• esecuzione query 

• lettura di righe e campi 

• disconnessione 
Fin qui tutto bene, ma bisogna ricordarsi che l'output 
e quindi dovremo impostare l'Header di risposta c 
appropriato ovvero : 

headerfContent-type: text/xml 1 ); 

Costruire la query 

C'è poi da gestire la query impostando la selezione in base dell'input del- 
l'utente. 

Partiamo proprio dall'input dell'utente, per prima cosa dovremo inter- 
cettare le variabili Request che potranno essere : 



dovrà essere in XM L 
:on il Content-Type 
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• search - la stringa da cercare 

• field - il campo in cui effettuare la ricerca 

Prevederemo anche il caso in cui l'utente non imposti il campo valoriz- 
zando la variabile con il nome del primo campo della query. 
Il tutto si traduce nel codice: 

$search = $_REQUEST[" search"]; 
$field = $_REQUEST[" field"]; 
if($field=="")$field = "CompanyName"; 

Occorre poi utilizzare questi parametri per costruire la query: 

//SQL query 

$Query = " SELECTCompanyName, ContactName,Address, City Country FROM 

Customers " ; 

if ($search!=") { 

$search = preg_replace(" /'+/", ,$search); 
$Query .= " WHERE $field UKE '$search% nl ; 



cioè : se è presente l'impostazione della variabile $search ripuliamo la 
stringa dal carattere che darebbe luogo a errori SQL sostituendolo 
con i doppi apici; costruiamo poi la clausola WHERE accodandola alla 
stringa $Query. 

Costruire la risposta XML 

L'XM L sarà costruito all'interno del ciclo di lettura dei dati come strin- 
ga e restituito con echo: 



$s = " <root>" ; 
//lettura dati 

while(odbc_fetch_row($queryexe)) { 
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$cname = enc(odbc_result($queryexe, "CompanyName")); 
$pname = enc(odbc_result($queryexe, " ContactName" )); 
$address = enc(odbc_result($queryexe, " Address" ) . " " . 
odbc_result($queryexe, "City") , " " . odbc_result($queryexe, "Country") 

); 

$s ,= " company=\" $cname\" " ; 
$s .= " contact=\" $pname\" " ; 
$s .= " address=\"$address\"/>"; 
} 

$s .= "</root>"; 
//disconnessione dal database 
odbc_close($connectionstring); 
echo($s); 



I— 



avrete senz'altro notato che il risultato della lettura del campo, effettuato 
con la funzione odbc result, è stato passato come parametro alla fun- 
zione enc? 

Abbiamo fatto in questo modo perché nella stringa proveniente dal da- 
tabase ci potrebbero essere dei caratteri speciali che XM L potrebbe se- 
gnalare come errori. 

La funzione enc si occupa appunto di codificare i caratteri della strin- 
ga in formato comprensibile per XM L: 

function enc($s){ 

return xmlentities($s); 

} 

La funzione di appoggia a sua volta alla funzione xmlentities (presa pa- 
ri pari da internet su http://theserverpages.com/php/manual/en/func- 
tion.htmlentities.php ) che è espressa così: 

function xmlentities($string, $quote_style=ENT_QUOTES){ 
static $trans; 
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if(!isset($trans)){ 
$trans = get_html_translation_table(HTM L ENTITIES, $quote_style); 
foreach ($trans as $key => $value) 
$trans[$key] = , &#.ord($key).';'; 
$trans[chr(38)] = '&'; 

} 

return preg_replace('7£<(?![A-Za-z]{) : 4]\w{2 : 3};|#[0-9]^,3};)/"; , £<#38;" , 
strtr($string, $trans)); 

} 

Il risultato 

Il risultato finale del nostro lavoro sarà quindi: 



<?php 



header('Content-type: text/xml'); 



$search = $_REQUEST["search"]; 
$field = $_REQUEST["field" ]; 
if($field==" " ) $f ield = "CompanyName"; 
//connessione al database 

$connectionstring = odbc_connect(" NWIND" , "fs" , 11 fs" ); 



//SQL query 

$Query = " SELECT CompanyName, ContactName, Address, City, Country FROM 

Customers " ; 

if ($search! =") { 

$search = preg_replace(" /'+/", ,$search); 

} 

//recupero dati 

$queryexe = odbc_do($connectionstring, $Query); 
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//lettura dati 

w hi le(od bc_ fetch_ row ($q ueryexe)) { 
$s.= " <persona"; 

$cname = enc(odbc_result($queryexe, "CompanyName")); 
$pname = enc(odbc_result($queryexe, "ContactName")); 
$address = enc(odbc_result($queryexe, "Address") , " " . 
odbc_result($queryexe, "City") . " " . odbc_result($queryexe, "Country") ); 
$s .= " company=\" $cname\" " ; 
$s .= " contact=\"$pname\""; 
$s .= " address=\" $address\"/>" ; 

} 

$s .= " </root>"; 
//disconnessione dal database 
odbc_close($connectionstring); 
echo($s); 



/♦funzioni di encode XML*/ 

function xmlentities($string, $quote_style=ENT_QUOTES) 
{ 

static $trans; 
if (!isset($trans)) { 

$trans = get_html_translation_tab[e(HTM L ENTITIES, $quote_style); 

foreach ($trans as $key => $value) 
$trans[$key] = , &#.ord($key).'; 1 ; 

$trans[chr(38)] = 

} 

return preg_replace("/S<{?![A-Za-z]^,4^w^,3};|#[0-9H2,3};)/" ," S<#38;" , 

strtr($string, $trans)); 

} 

function enc($s){ 

return xmlentities($s); 



} 

?> 



I libri di ioPROGRAMMo/Programmare con Ajax 



95 



PROGRAMMARE CON 

AJAX 



Lato server 



Capitolo 4 



Puntiamo quindi il browser sulla pagina in questione e otterremo l'elenco 
completo della query sulla tabella in formato XM L (vedi figura 3). 
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Figura 3: La query in XM L da php 

A questo punto potremo sbizzarrirci con le prove di selezione impo- 
stando nella URL i vari parametri di selezione; ad esempio scrivendo la 
URL come 



http://mioserver/server.php?search=b&field=contactName 




Figura 4; la query in XML da php con selezione 
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Avremo sul browser il risultato di cui in figura 4 (ovviamente la parte di 
URL http://mioserver andrà sostituita con l'indirizzo del server in cui 
avrete pubblicato la pagina) 



43 FACCIAMOLO IN CLASSICASP 

Vediamo adesso come risolvere il problema in classicASP, a qualcuno sem- 
brerà di fare "archeologia" visto che siamo quasi arrivati alla versione 
3 del .NET Framework ma il vecchio ASP è ancora molto usato accingiamoci 
quindi a scrivere in un file che chiameremo server.asp. 
La dinamica della connessione in ASP è la seguente: 

"C 

'stringa di connessione 

connString =" DSN=NWIND;Uid=fs;Pwd=fs;" 

Dim conn , rs .3 
'istanza di connessione 

set conn=CreateObject(" ADODB.CONNECTION" ) 

conn.ConnectionString=connString .E 
'istanza di recordset 

set rs = CreateObjectl" ADODB.RECORDSET" ) 
'Query 

Query = " SELECTCompanyName, ContactName,Address, City, Country FROM 

Customers " 

'apertura di connessione e recordset 

conn.Open 

rs.Open Queryconn 

do until rs.EOF 

'ciclo di lettura delle righe 

rs.MoveNext 

loop 

'chiusura e rilascio oggetti 

rs.Close 

conn.Close 
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set rs = nothing 
setconn 



Anche in ASP dovremo impostare poi il ContentType della risposta su XM L 
Response.ContentType= " text/xml" 
Costruire la query 

Valutiamo l'input dell'utente contenuto nelle variabili search e field e co- 
struiamo la query di selezione : 

Dim search, field 

search = Requestf" search") 

field = Requestf" field") 

if field=" " then field = "CompanyName" 

Query = " SELECT CompanyName, ContactName, Address, City, Country FROM 

Customers " 

if search <>"" then 

search = replacefsearch, , ) 

Query = Query & " WHERE " & field & " UKE '" & search & "%"' 

La logica non cambia rispetto all'esempio in PHP. 
Costruire l'XML 

La parte più difficile è la costruzione dell'XML, se avessimo utilizzato 
un documento DOM XM L le cose sarebbero state semplici : istanza del- 
l'oggetto, costruzione dei nodi e impostazione degli attributi. Il proble- 
ma è che l'implementazione del DOM utilizzabile da ASP non effettua 
la conversione corretta delle stringhe di caratteri non ASCII, siamo quin- 
di costretti a usare SAX per produrre XM L, questo comunque è anche 
un vantaggio perché SAX è molto più veloce nella risposta. 
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Quindi vediamo come è gestito l'output XM L con SAX: 



Set xmlWriter = Server.CreateObiect("MSXML2.MXXMLWriter.4.0") 

xmlWriter.encoding=" UTF-8" 

'invia output del writer al response stream di ASP 

xmlWriter.output = Response 

'Genera eventi SAX 

xmlWriter.startDocument 

xmlWriter.startElement " " , " " , " root" , nothing 

Set objAttributes = Server.CreateObject(" Msxml2.SAXAttributes.4.0" 

do until rs.EOF 

cname = rs(" CompanyName" ) 

pname = rs(" ContactName" ) 

address = rs(" Address" ) & " " & _ 
rs(" City" ) & " " & _ 
rs(" Country") 



objAttributes.addAttribute 
objAttributes.addAttribute 
objAttributes.addAttribute 
xmlWriter.startElement " ", 
xmlWriter.endElement " ", 
objAttributes.clear 

rs.MoveNext 

loop 

xmlWriter.endElement " "," ", " 
xmlWriter.endDocument 



' " ," company" ," CDATA" ,CStr(cname) 
' " ," contact" ," CDATA" ,CStr(pname) 
' " ," address" ," CDATA" ,CStr(address) 
" persona", objAttributes 
" persona" 



root" 



come possiamo notare SAX scrive direttamente sullo stream Response 
di ASP 

Il risultata 

Il risultato finale del nostro lavoro in classicASP sarà quindi: 
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<% 

Response.ContentType= " text/xml" 

Dirti search, field 

Dirti connString.Query 

search = Requestf search" ) 

field = Requestf" field") 

if field=" " then field = "CompanyName" 

connString =" DSN=NWIND;Uid=fs;Pwd=fs;" 

Dirti conn , rs 

setconn=CreateObject(''ADODB.CONNECTION'') 



set rs = CreateObjectt" ADODB.RECORDSET" ) 

Query = " SELECT CompanyName, ContactName, Address, City, Country FROM 

Customers " 

if search <>"" then 

search = replacefsearch, , ) 

Query = Query & " WHERE " & field & " UKE 111 & search & "%"' 
end if 

conn. Open 
rs.Open Queryconn 
'Istanza di xmlWriter 

Set xmlWriter = Server.CreateObject(" M SXM L2.M XXM LWriter.4.0" ) 

xmlWriter.omitXM LDeclaration =True 

xmlWriter.indent = false 

xmlWriter.encoding=" UTF-8" 

'invia output del writer al response stream di ASP 

xmlWriter.output = Response 



'Genera eventi SAX 
xmlWriter.startDocument 
xmlWriter.startElement " " , " " , " root" , nothing 
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do until rs.E0F 

cname = rs(" CompanyName" ) 
pname = rs(" ContactName" ) 
address = rs(" Address" ) & " * & 
rs(" City" ) & " " Si _ 
rs(" Country" ) 
objAttributes.addAttribute " " ," " , 
objAttributes.addAttribute " " ," " , 
objAttributes.addAttribute " " ," " , 
xmlWriter.startElement " " 
xmlWriter.endElement " " 
objAttributes.clear 

rs.MoveNext 

loop 

xmlWriter.endElement " " , " ", " root" 

xmlWriter.endDocument 

rs.Close 

conn.Close 

set rs = nothing 

setconn = nothing 

setobjAttributes = nothing 

set xmlWriter= nothing 

%> 



" ," company" ," CDATA" ,CStr(cname) 
" ," contact" ," CDATA" ,CStr(pname) 
" * address" ," CDATA" ,CStr(address) 
1 persona", objAttributes 
persona" 



Puntiamo il nostro browser sulla pagina server.asp del sito di test e ot- 
terremo come risultato lo stream XM L della selezione effettuata (in ma- 
niera identica a quanto avveniva con PHP). 
Anche qui naturalmente potremmo provare varie selezioni impostan- 
do i parametri della queryString della URL come ad esempio: 



http://mioserver/server.asp?search=bSifield=contactName 

sempre naturalmente sostituendo la parte di URLhttpV/mioservercon 
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l'indirizzo del server in cui avrete pubblicato la pagina. 



44 FACCIAMOLO IN ASP.NET CON C# 

Affrontiamo adesso lo stesso problema nell'ottica diASP.NET con linguaggio 
C#, per la nostra pagina di risposta scegliamo il modello di scrittura di 
pagineASP.NET inline, contrapposto al modello codebehind che preve- 
de il codice in un file separato (qui sarebbe inutile visto che la pagina con- 
tiene solo codice). 

Per prima cosa andiamo ad importare, nella nuova pagina server.aspx 
che scriveremo, gli spazi dei nomi che contengono le classi che ci servi- 
ranno per lavorare: 



<%@ Page Language="C#' %> 
<%@ Import Namespace=" System" %> 
<%@ Import Namespace=" System. Web" %> 
<%@ Import Namespace=" System. Xml" %> 
<%@ Import Namespace="System.Data" %> 



Scriveremo poi tutto il nostro codice all'interno delTAG <script>: 



<script runat=" server" > 
</script> 



In C#possiamo modulare meglio il flusso del programma per cui impostiamo 
delle proprietà (Search e Field) che raccolgono i criteri di ricerca impo- 
stati dall'utente. 
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{ 

string s = Request.Params.Get(" search" ); 
if (!String.lsNullOrEmpty(s)) s = s.Replacel , ); 
return s; 

} 

} 

public string Field 
{ 

get 
{ 

string f = Request.Params.Get(" field" ); 
if (String. IsNullOrEmpty(f)) f = "CompanyName"; 
return f; 
} 

1 .9 



com'è possibile notare la gestione dei valori nulli e dei caratteri non va- 
lidi avviene direttamente all'interno delle proprietà 

Impostiamo quindi la funzione che compone la query al database: 

private string GetQueryO 
{ 

string query = " SELECT CompanyName, ContactName, Address, City, 

Country FROM Customers " ; 

if (Search ! = nuli) 
{ 

query += String.Format(" WHERE {D}LIKE '{1}%'" , Field, Search); 

} 

return query; 

} 



e, di seguito, quella che crea la connessione: 
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private OdbcConnection GetConnQ 
{ 

string connStr = " DSN=NWIND;Uid=fs;Pwd=fs;" ; 
return new OdbcConnection(connStr); 



Creazione dell'XML 

Anche qui, come abbiamo fatto in classic ASP, utilizziamo un XmlWriter 
per scrivere i dati che provengono dal database, soltanto che in .NET l'og- 
getto è molto più semplice: 

XmlTextWriter writer = new XmlTextWriter(this.Response.Output); 

writer.WriteStartDocumentO; 

writer.WriteStartElement(" root" ); 

while (reader.ReadO) 

{ 

string cname = reader.GetString(O); 
string pname = reader.GetString(l); 

string address = reader.GetString(2) + " " + reader.GetString(3) + rea 

der.GetString(4); 

writer.WriteStartElement(" persona" ); 
writer.WriteAttributeStringl" company" , cname); 
writer.WriteAttributeStringl" contact" , pname); 
writer.WriteAttributeStringl" address" , address); 
writer.WriteEndElementO; 

} 

reader.CloseO; 



writer.WriteEndElementO; 




da notare che abbiamo puntato l'output dell'XmlWriter direttamente 
sul flusso della Response della pagina. 
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Il recupero dei dati, come in parte abbiamo visto, avviene per mezzo di 
un DataReader creato da un Command che esegue la query: 

OdbcConnection cnn = this.GetConnO; 
OdbcCommand cmd = cnn.CreateCommandO; 
cmd.CommandType = CommandType.Text; 
cmd.CommandText = this.GetQueryO; 
cnn.Openf); 

OdbcDataReader reader = 

cmd.ExecuteReader(CommandBehavior.CloseConnection); 

Il risultato 

Tutto il codice della nostra pagina ASP.NET in C#sarà alla fine: 

<%@ PageLanguage="C#' %> .3 



System" %> 
System.Web" %> 
System.Xml" %> 
System. Data" %> 
System.Data.Odbc" %> 



<%@ Import Namespace= 
<%@ Import Namespace= 
<%@ Import Namespace= 
<%@ Import Namespace= 
<%@ Import Namespace=' 
<script runat=" server" > 

public string Search 

{ 

get 
{ 

string s = Request.Params.Get(" search" ); 
if (!String.lsNullOrEmpty(s)) s = s.Replace( 
return s; 

} 

} 

public string Field 
{ 

get 
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{ 

string f = Request.Params.Get(" field" ); 

if (String. IsNullOrEmpty(f)) f = "CompanyName"; 

return f; 

} 

} 

private string GetQueryO 
{ 

string query = " SELECT CompanyName, ContactName, Address, City, 



if (Search != nuli) 
{ 

query += String.Format(" WHERE ©}LIKE '{Lf/o 111 , Field, Search); 

} 

return query; 

} 

private OdbcConnection GetConnO 
{ 

string connStr = "DSN=NWIND;llid=fs;Pwd=fs;"; 
return new OdbcConnection(connStr); 

} 

protected void Page_Load(object sender, EventArgs e) { 
this.Response.ContentType = "text/xml"; 
OdbcConnection cnn = this.GetConnO; 
OdbcCommand cmd = cnn.CreateCommandO; 
cmd.CommandType = CommandType.Text; 
cmdXommandText = thi,GetQuery(); 



cnn.Open(); 

OdbcDataReader reader = 

cmd.ExecuteReader(CommandBehavior.CloseConnection); 
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writer.WriteStartDocu ment(); 
writer.WriteStartElement(" mot" ); 
while (reader.ReadO) 
{ 

string cname = reader.GetString(O); 
string pname = reader.GetString(l); 
string address = reader.GetString(2) + " " + reader.GetString(3) + 

reader.GetString(4); 

w riter. W ri teStartElemen t( " persona" ); 
writer.WriteAttributeString(" company" , cname); 
writer.WriteAttributeString(" contact" , pname); 
writer.WriteAttributeString(" address" , address); 
writer.WriteEndElementO; 

} 

reader.CloseO; 
writer.WriteEndElementO; 
writer.WriteEndDocumentO; 
writer.CloseO; 

} 

</script> 

Puntiamo il nostro browser sulla pagina server.aspx del sito di test e ot- 
terremo come risultato lo stesso XM L degli esempi precedenti. 
Anche qui naturalmente potremmo provare varie selezioni impostan- 
do i parametri della queryString della URL come ad esempio: 

http://mioserver/server.aspx?search=a&field=Address 

sempre naturalmente sostituendo la parte di URL http://mioserver con 
l'indirizzo del server in cui avrete pubblicato la pagina. 

E se preferiamo VB , . 

Naturalmente l'esempio che abbiamo visto in C#può essere anche scrit- 
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to in VB.NET come: 

<%@ Import Namespace=" System" %> 
<%@ Import Namespace="System.Web" %> 
<%@ Import Namespace=" System. Xml" %> 
<%@ Import Namespace=" System. Data" %> 
<%@ Import Namespace=" System. Data. Odbc" %> 
<%@ Page Language="VB" %> 

<script runat=" server" > 
Public ReadOnlyPropertySearchOAsString 
Get 

Dim sAs String = Request.Params.Get("search") 
If Not String.lsNullOrEmpty(s) Then s = s.Replacef , ) 
Return s 
End Get 
End Property 

Public ReadOnly Property FieldO As String 
Get 

Dim s As String = Request.Params.Getf 1 field" ) 
If Not String. IsNullOrEmpty(s) Then s = "CompanyName" 
Return s 
End Get 
End Property 

Private Function GetQueryO As String 
Dim query As String = " SELECT CompanyName, ContactName, Address, 

City, Country FROM Customers " 
lfNotString.lsNullOrEmpty(Search)Then 



query £,= String.Format(" WHERE {0}LIKE '{1}%'", Field, Search) 
End If 

Return query 
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Private Function GetConnO As OdbcConnection 
Dim connStrAs String = 11 DSN=NWIND;Uid=fs;Pwd=fs;" 
Return New Od bcCo n necti o n (co n n Str) 

End Function 



Protected Sub Page_Load(ByVal senderAs Object, ByVal e As 

System. EventArgs) 

Me.Response.ContentType = "text/xml" 

Dim cnn As OdbcConnection = Me.GetConnQ 

Dim cmd As OdbcCommand = cnn.CreateCommandO 

cmd.CommandType = CommandType.Text 

cmd.CommandText = Me.GetQueryO 

cnn.OpenO 

Dim readerAs OdbcDataReader = 

cmd.ExecuteReader(CommandBehavior.CloseConnection) 
Dim writer As New XmlTextWriter(Me.Response.Output) 
w ri ter. W ri teStartDo cu ment() 
w ri ter. W ri teStartEI emen t( " root" ) 
While reader.Read 
Dim cnameAs String = reader.GetString(O) 
Dim pnameAs String = reader.GetString(l) 
Dim address As String = reader.GetString(2) & " " & reader.GetString(3) 

& reader.GetString(4) 

w riter. W ri testa rtElement( " persona" ) 

writer.WriteAttributeString(" company" , cname) 

writer.WriteAttributeString(" contact" , pname) 

writer.WriteAttributeString(" address" , address) 

w ri ter. W ri teEnd El emen t( ) 
End While 
reader.CloseO 
writer.WriteEndElementO 
writer.WriteEndDocumentO 
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End Sub 
</script> 



45 FACCIAMOLO CON UN WEB 
SERVICE .NET CON VB 

Per completare la carrellata dei nostri esempi lato server terminiamo 
con la risoluzione del problema proposto all'inizio del capitolo attra- 
verso un Web Service scritto conVB.NET. 
Con .NET l'implementazione di un Web Service è veramente semplice, 
è sufficiente scrivere in un file con estensione .asmx una classe del tipo: 



<%@ WebServiceLanguage="VB" Class=" server" %> 



<WebService()> _ 
Public Class server 

Inherits System.Web.Services.WebService 

' Inserire codice qui ... 
End Class 



Prima di iniziare dovremmo però definire un file web.config per l'appli- 
cazione Web. Il file web.config è un semplice file XM L posto nella di- 
rectory root del sito Web e contenente le impostazioni di configurazio- 
ne. 

Peri nostri scopi basta impostare il web.config in questo modo : 



il version=" 1.0" encoding^" utf-8" ?> 
=iguraticn> 



<system.web> 
<webServices> 
<conformanceWarnings> 
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</conformanceWarnings> 
<protocols> 

<add name=" HttpPost"/> 
<add name=" HttpGet" /> 
</protocols> 
</webServices> 
</system.web> 
</configuration> 

Quello che abbiamo visto serve per : 

• Eliminare gli avvisi di conformità rispetto ad alcuni standard. 
Infatti poiché utilizziamo il flusso XM L prodotto dal Web Service con 
AJAX, e quindi senza una deserializzazione, sarebbe superfluo ge- 
stire i Namespaces come invece richiederebbero gli standard di confor- 
mità. 

• Abilitare l'utilizzo del Web Service da POST e/o da GET oltre che da 
SOAP AJAX attraverso il parsing XM L potrebbe anche gestire SOAP, 
ma questo produrrebbe soltanto output più grandi, senza alcun be- 
neficio pratico; quindi useremo POST, GET lo consentiamo per effet- 
tuare dei test, ma in produzione è bene toglierlo 

L'output XML 

Con un Web Service l'output è costituito sempre da XM L e quindi non 
c'è alcuna necessità di controllare direttamente il flusso. Per trasforma- 
re l'oggetto di risposta in XM L il Web Service utilizza la Serializzazione 
XM L, quindi, per modellare la risposta secondo le nostre esigenze do- 
vremo creare un oggetto con gli adeguati attributi di controllo della se- 
rializzazione. 

Noi abbiamo quindi modellato il nostro oggetto in una classe: 

<XmlRoot(" root" , Namespace:- 1 " )> _ 
Public Class Indirizzi 
Public Sub Add(ByVal company As String, ByVal contact As String, ByVal 

addressAs String) 
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Dim p As New Persona 
p.company = company 
p.contact = contact 
p.address = address 
Persone.Add(p) 
End Sub 

Private _ Persone As ListfOf Persona) 
<XmlElement(" persona" )>_ 
Public Property Persone)) As ListfOf Persona) 
Get 

If.PersonelsNothing-Then 

_Persone = New ListfOf Persona) 
End If 

Return _ Persone 
End Get 

SetfByVal Value As ListfOf Persona)) 

Persone = Value 
End Set 
End Property 

Public Class Persona 
<XmlAttribute()> Public company As String 
<XmlAttribute()> Public contactAs String 
<XmlAttribute()> Public address As String 

End Class 



gli attributi <XmlRoot>, <XmlElement>, <XmlAttribute> permettono 
appunto di definire la formattazione in fase di serializzazione della clas- 
se. 

La struttura del metodo che verrà richiamato dal client è: 
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Public Function GetSelectionfByVal search As String, ByVal field As Stringi As 

Indirizzi 

End Function 

l'attributo <WebM ethod()> indica infatti che il Web Service espone il me- 
todo GetSelection , in fase di risposta l'oggetto di tipo Indirizzi che risulta 
dalla funzione sarà serializzato in XM L secondo le indicazioni che sono 
state fornite negli attributi della classe Indirizzi che abbiamo visto pri- 
ma. 

Il risultato 

Il resto del codice è molto simile a quanto visto negli esempi precedenti, 
il sorgente completo si presenta: 

<%@ WebService Language=" VB" Class- 1 server" %> 

Imports System 

Imports System. Web 

Imports System. Web.Services 

Imports System. Web.Services.ProtocoIs 

Imports System. Data 

Imports System. Data. Odbc 

Imports System. Collections.Generic 

Imports System.Xml 

Imports System. Xml. Serialization 

<WebService(Namespace:=" " )> _ 
Public Class server 
I n herits System .Web . Servi ces. Web Servi ce 

<WebMethod()>_ 

Public Function GetSelectionfByVal search As String, ByVal field As String) As 
Indirizzi 
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Dirti queryAs String = "SELECTCompanyName, ContactName, Address, 

City, Country FROM Customers " 

If Not String. IsNullOrEmpty(search) Then 
search = search.Replace( , ) 
If String.lsN ullOrEmptyCfield) Then field = "CompanyName" 
query &= String.Format(" WHERE {D}LIKE '{1}%'" , field, search) 

End If 

Dim cnn As New OdbcConnection("DSN=NWIND;Uid=fs;Pwd=fs;") 
Dim cmd As OdbcCommand = cnn.CreateCommandO 
cmd.CommandType = CommandType.Text 
cmd.CcmmandText = quen, 
cnn.Openf) 

Dim reader As OdbcDataReader = 

cmd.ExecuteReader(CommandBehavior.CloseConnection) 
Dim result As New Indirizzi 
While (reader.Read(l) 
Dim cname As String = reader.GetString(O) 
Dim pnameAs String = reader.GetString(l) 
Dim addressAs String = reader.GetString(2) + " " + reader.GetString(3) 

+ reader.GetString(4) 

result.Addfcname, pname, address) 
End While 
Return result 
End Function 

<XmlRoot(" root" , Namespace:=" " )> _ 
Public Class Indirizzi 
Public Sub AddfByVal company As String, ByVal contactAs String, ByVal 

address As String) 



Dim p As New Persona 
p.company = company 
p.contact = contact 
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Persone.Add(p) 
End Sub 

Private _ Perso ne As ListfOf Persona) 
<XmlElement(" persona" )> _ 
Public Property Persone!) As ListfOf Persona) 
Get 

If Persone Is Nothing Then 

_ Persone = New ListfOf Persona) 
End If 

Return _Persone 
End Get 

SetfByVal ValueAs ListfOf Persona)) 

_ Persone = Value 
End Set 

End Property .Q 



Public Class Persona 
<XmlAttribute()> Public company As String 
<XmlAttribute()> Public contact As String 
<XmlAttribute()> Public address As String 

End Class 
End Class 



End Class 



Se andiamo ad aprire il browser all'indirizzo della nostra pagina ser- 
ver.asmx troveremo un'interfaccia con un modulo che ci consente di te- 
stare direttamente il funzionamento del servizio, com'è possibile vede- 
re in figura 5. 

Se proviamo ad impostare i parametri e cliccare sul bottone " richiama" 
otterremo una risposta XM L del tutto analoga a quella che abbiamo 
visto negli altri esempi, vedi figura 6. 



I libri di ioPROGRAMMo/Programmare con Ajax 



115 



PROGRAMMARE CON 

AJAX 



Lato server Capitolo 4 





~ 




^ 1 ^ 














1 1 






server 


• 


Pirvtfs IHM!* «tmn» l»l»nw wtr«WUr A 








GEbSei action 








Tr»l 

Nf «twin * M *»r«fiw«M MftMÉ 




t.ftra (fa tu' Munta l^cMm» 








uto'i | 








hulri f 
•...Al- ! ! 

Pi ih-j-o • PWtKV ¥<i fitm» * * n**"M 








.■telij.. , «Biv*t.wu> UT Ti'/ 1 . 






- 





Figura 5: Interfaccia di test per il Web Service 
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Tutto quanto visto fino adesso ci dovrebbe aver dato sufficiente baga- 
glio tecnico per affrontare una piccola applicazione in AJAX. 
Come sempre partiamo da un problema specifico piuttosto che da una 
trattazione teorica. 



Vogliamo fare un'applicazione che consenta la ricerca all'interno della 
tabella Customers del database Northwind, ci sarà una textbox dove 
l'utente inserirà i termini della ricerca, una select che consente di scegliere 
il campo in cui effettuare la ricerca e un bottone di invio. 
Sul click sul bottone di invio dovrà partire una XM LHttpRequest verso 
una delle pagine lato server che abbiamo predisposto, dovremo poi in- 
terpretare i risultati e trasformarli in una tabella HTM L per presentarli al- 
l'utente, il tutto senza ovviamente ricaricare la pagina. 



Prima di tutto dovremo creare una nuova pagina HTM L. Per dimostra- 
re come AJAX sia totalmente indipendente da tecnologie lato server, 
scegliamo di creare una pagina in HTM Lstatico alla quale quindi dare- 
mo un'estensione .html o .htm. 

Il layout HTM L 

Inseriamo nella pagina tutti gli elementi di partenza ovvero: 

• una form contenente: 

/ un textBox per inserire la stringa di ricerca 
/ un select per selezionare il campo della tabella 
/un bottone submit 

• un DIV vuoto destinato a contenere i risultati 
Il layout risultante sarà: 

<div class- 1 title" >Selezione tabella clienti</div> 



5.1 IL PROBLEMA 




5.2 SOLUZIONE 
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<form onsubmit="sendRequest();return false" > 
<table class=" layoutTable" cellpadding=" 2" cellspacing=" 0" > 
<tr> 

<td> 

<div class=" label" >Parola iniziale</div> 

<input class- 1 inputBox" type=" text" id="search"> 

</td> 

<td> 

<div class=" label" >Nel campo</div> 
<select id="field" ></select> 



<td valign=" bottom"> 

<input type=" submit" class- 1 submit" value=" Invia" > 

</td> 
</tr> 
</table> 
</form> 

<div id=" result" ></div> 

naturalmente avremo cura di attribuire degli id a quegli elementi che sa- 
ranno coinvolti nel processo AJAX in modo da poterli facilmente referenziare 
nel codice javascript. 

Il <form>, come vedete, non punta a nessuna pagina in particolare 
(manca infatti l'attributo action) ma serve solo a gestire l'evento on- 
submit che esegue la funzione sendRequest (che definiremo poi) e quin- 
di blocca l'invio effettivo con return false. 
In realtà avremmo potuto anche assegnare direttamente la funzione 
sendRequest all'evento onclick di un bottone senza utilizzare per nien- 
te il <form> tuttavia, in questo caso, la funzione non sarebbe stata in- 
vocata alla pressione del tasto Return sulla casella di testo e questo sa- 
rebbe un comportamento che potrebbe disorientare molti utenti. 
Un'altra particolarità è quella che la <select> che dovrebbe contenere 
la lista dei nomi dei campi è in realtà vuota. 
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Questo perché vogliamo riempirla dinamicamente, vediamo come. 
La selectBox con ì nomi dei carni» 

La query su cui ci basiamo è quella mostrata negli esempi lato server, e 
cioè: 



SELECTCompanyName, ContactName.Address, City, Country FROM Customers 



I campi su cui l'utente può basare la selezione sono: 

• CompanyName 

• ContactName 
•Address 

• City 

• Country 

Nell'XM L risultante però i campi (attributi del nodo) sono solo tre : com- 
pany (da CompanyName) , contact (da ContactName), e address (dal- 
la concatenazione di Address, City e Country) come possiamo vedere 
da uno degli elementi dell'output: 



<persona company=" Alfreds Futterkiste" contact=" Maria Anders" 

address=" Obere Str. 57 BerlinGermany"/> 

Da ciò ne ricaviamo che: 

• tutti i nomi dei campi devono apparire nella selectBox 

• soltanto alcuni devono apparire nella tabella risultato 

Quindi, in Javascript andiamo a costruire un modello per definire 
i campi: 

varfields = [ 

{' value" :" CompanyName" ," caption" :" Nome azienda" , 

" attname" :" company" ," header" :true}, 
{' value" :" ContactName" ," caption" :" Nome contatto" , 



I libri di ioPROGRAMMo/Programmare con Ajax 



119 



PROGRAMMARE CON 

AJAX 



Finalmente AJAX 



Capitolo 5 



11 attname":" contact" ," header" :true} : 
{' value" :" Address" ," caption" :" Indirizzo" ," attname" :" address" , 

" header" :true}, 

{' value" :" City" ," caption" :" Città" ," header" :false} : 
{' value" :" Country" ," caption" :" Stato" ," header" :false} 

1 

Cioè dichiariamo una variabile fields che contiene un Array di oggetti de- 
finiti inplace che hanno le seguenti proprietà: 

• value - il nome del campo nella query SQL e valore nella <option> 
della <select>. 

• caption - il nome convenzionale del campo che useremo per le in- 
testazioni delle colonne e per il testo nella <option> della <select>. 

• attname - il nome dell'attributo nel nodo <persona> che ci arriva dal 
server. Questo è presente solo nel caso in cui header sia true. 

• header - indica se utilizzare l'oggetto per le intestazioni di colonna 
e per il recupero dati. 

Certo che abbiamo complicato un po' le cose non è vero? M a solo in ap- 
parenza, in realtà questi oggetti ci saranno molto utili: 

• per riempire la selectBox 

• per costruire le intestazioni colonna della tabella 

• per recuperare i valori da inserire nelle celle della tabella 

È vero, come obbietterà qualcuno, che nulla ci vieta di scrivere i valori del- 
la selectBox direttamente nei tag <option>, così: 

<selectid="field"> 

<option value- 1 CompanyName" >Nome azienda</option> 
<opticn value="CcntactName" >Nome contattc</option> 

</select> 



Però se avessimo fatto in questo modo pensate all'eventualità in cui 
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dovessimo utilizzare un'altra query o cambiassero i nomi campi. 
Disponendo invece dell'Array di oggetti fields possiamo riempire dina- 
micamente la selectBox, con questa funzione : 

function fillSelectFields(){ 
//riferimento al <select> 
var oSel = document.getElementByld(" field" ); 
for(var i =0;i <f ields. length;iH — H){ 
var field = fields[i]; 
//nuovo elemento <option> 
var oOpt = oSel.appendChildl 

document.createElement(" option" ) ); 

oOpt.value = field. value; 
oOpt.innerHTM L= field. caption; 

} 

} 

Invio della richiesta 

L'invio della richiesta al server, con la libreria jsXM L, è una cosa sem- 
plice: 

function sendRequest(){ 

var serverUrl = " server.php" ; Ilo server.asp o server.aspx o server.asmx 
var searchValue = document.getElementByld(" search" ). value; 
var fieldValue = document.getElementByld(" field" ).value; 
//parametri 

var requestBody = "search=" + encodeURIComponent(searchValue) + 

"&field=" + encodeURIComponent(fieldValue); 
jsXM L.sendAsyncPostfserverUrl, 

requestBody, 

formatResult, 

errar, 

wait); 
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In pratica abbiamo indicato nella variabile requestBody i parametri se- 
lezionati (che derivano dall'inputBox e dalla selectBox) e abbiamo invocato 
una richiesta asincrona in Post con jsXM LsendAsyncPost. 
A questo punto la logica si sposta sulle tre funzioni callback: forma- 
tResult, error, wait; le ultime due regolano rispettivamente il caso in cui 
si verifichi un errore o in cui ancora il flusso non sia terminato. Il loro 
codice sarà: 

function error (msg) { 
alert(msg); 

} 

function wait(){ 

document.getElementByld{" result" ).innerHTM L= "Attendi..." 

} 

ovvero: in caso d'errore mostra il messaggio e in caso di attesa scrive un 
avviso nel DIV di destinazione. 

La parte di codice più articolata sarà ovviamente quella di gestione dei 
dati in caso di successo, ovvero la funzione formatResult: 



function formatResult(strXML){ 

var objDOM = jsXM L.parseXM LDocumentfstrXM L); 
var oResult = document.getElementByld(" result" ); 
oResult.innerHTM L= " " ; //cancellazione contenuto precedente 
var oTable = oResult.appendChild( document.createElement(" table" ) ); 
var oTr = oTable.insertRow(-l); 



//costruisce le intestazioni di riga 
for(var i=0;t<fields.length;i++){ 
varfield =fields[i]; 
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varoTh = oTr.appendChild( document.createElement("th") ); 
oTh.innerHTM L= field.caption; 

} 

} 

//XPath per estrarre i nodi <persona> 
var persone = objDOM.selectNodesf" //persona" ); 
for(var i=0;i<persone.length;i++){ 
var persona = persone[i] 
varoTr = oTable.insertRow(-l); 
for(varj=0;j<fields.length;j++){ 
varfield = fields[j]; 
if(field.header){ 

varoTd = oTr.insertCell(-l); 

oTd.innerHTML= persona. getAttribute(field.attname); 

} 

} 

} 

} 

Le operazioni in sequenza sono: 

• trasformare l'input XM L in forma di stringa in un documento DOM 
XML 

• ottenere una referenza del DIV all'interno del quale andrà posizionata 
la tabella e cancellare l'eventuale contenuto 

• creare un nuovo oggetto table e utilizzare gli oggetti dell'Array fields 
che hanno la proprietà header su true per costruire la riga dell'inte- 
stazione 

• estrarre dal documento DOM XM L i nodi <persona> e scorrerli in 
un ciclo for creando un riga della tabella ad ogni passaggio. 

• All'interno del primo ciclo for innestare un secondo ciclo che torna 
a scorrere gli oggetti dell'Array fields , ne preleva la proprietà attua- 
rne (nome dell'attributo) e la usa per estrarre il valore del corrispon- 
dente attributo del nodo <persona> e inserirlo in una nuova cella del- 
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la riga corrente. 
Il risultato finale 

Il codice completo della procedura AJAX sarà: 

<! DOCTYPE HTM L PUBLIC " -//W3C//DTD HTM L 4.01 Transitional//EN" > 

<html> 
<head> 

<title>Esempio AJAX</title> 



src="jsXML.js"x/script> 
<script language=" Javascript" type=" text/javascript" > 
var fields = [ 

{' value" :" CompanyName" ," caption" :" Nome azienda" , 

" attname" :" company" ," header" :true} : 
{' value" :" ContactName" ," caption" :" Nome contatto" , 

" attname" :" contact" ," header" :true}, 
{' value" :" Address" ," caption" :" Indirizzo" ," attname" :" address" , 

" header" :true}, 

{' value" :" City" ," caption" :" Città" ," header" :false}, 
{' value" :" Country" ," caption" :" Stato" ," header" :false} 



function fillSelectFields(){ 

var oSel = document.getElementByld(" field" ); 
for(var i=0;i<fields.length;i++){ 

var field = f ields[i ]; 

var oOpt = oSel.appendChild 



oOpt.value = field. value; 
oOpt.innerHTM L= field. caption; 

} 
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function sendRequest(){ 
var serverUrl = " server.php" ; 

var searchValue = document.getElementByld(" search" ).value; 

var fieldValue = document.getElementByld(" field" l.value; 

var requestBody = "search=" + encodellRIComponent(searchValue) + 

"&field=" + encodeURIComponent(fieldValue); 
jsXM LsendAsyncPost(serverUrl, 

requestBody, 

formatResult, 

errar, 

wait); 

E 

function formatResult(strXML){ 

var objDOM = jsXM L.parseXM LDocument(strXM L); 

var oResult = document.getElementByld(" result" ); .3 

oResult.innerHTM L= " " ; //cancellazione contenuto precedente 

var oTable = oResult,appendChild( 

document.createElement(" table" ) ); .E 

var oTr = oTable.insertRow(-l); 
//costruisce le intestazioni di riga 
for(var i=0;i<fields.length;i++){ 

var field = fields[i]; 

if(field.header){ 

varoTh = oTr.appendChildf document.createElement("th") ); 
olti.innerHTM L= field. caption; 

} 

} 

//XPath per estrarre i nodi <persona> 

var persone = objDOM .selectNodesC //persona" ); 

for(var i=0;i<persone.length;i++){ 

var persona = persone[i] 

var oTr = oTable.insertRow(-l); 

for(var j=0;j<fields.length;j++){ 
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varfield =fields[j]; 
if(field.header){ 

varoTd = oTr.insertCell(-l); 

oTd.innerHTML= persona. getAttribute(field.attname); 

} 



} 

} 

function errar (msg){ 
alert(msg); 



function wait(){ 

document.getElementByld{" result" ).innerHTM L= "Attendi... 

} 

window.onload = function () { 
fillSelectFieldsO; 

} 

</script> 

<link rel=" STYLESHEET" type=" text/css" href=" style.css" > 
</head> 
<body> 

<div class=" title" >Selezione tabella clienti </div> 
<form onsubmit="sendRequest();return false" > 
<table class=" layoutTable" ce!lpadding=" 2" cellspacing=" 0" > 
<tr> 

<td> 

<div class=" label" >Parola iniziale</div> 



</td> 
<td> 

<div class=" label" >Nel campo</div> 
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</td> 

<td valign=" bottom"> 

<input type=" submit" ciass=" submit" id="" value=" Invia" > 

</td> 
</tr> 
</table> 
</form> 

<div id=" result" ></div> 
</body> 
</html> 



Il risultato nel browser sarà quello visibile in figura 7, notate come ad 
ogni query la tabella venga popolata in background senza ricaricare la 
pagina. 



S 
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Rgii3 7: AJAX in azione 



5.3 PERSISTENZA 
DELLE INFORMAZIONI 

L'applicazione già è funzionante, però un piccolo problema ancora c'è 
... se l'utente effettua per qualche motivo il reload della pagina (at- 
traverso il tasto F5 oppure segue un link e poi ritorna nella pagina) tut- 
to l'HTM L generato dinamicamente scompare e si torna alla situazione 
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iniziale. 

Intendiamoci, non sempre questo è un male, in questo caso ad esem- 
pio non è un vero e proprio problema quanto piuttosto un comportamento 
logico dell'applicazione. 

Alcune volte però può esserlo, pensiamo a una tabella con paginazio- 
ne: l'utente fa click su un prodotto che era a pagina 10 per vedere una 
scheda dettagliata, chiude la scheda e torna a pagina 1, questo decisamente 
è un comportamento non desiderabile. 
In generale il problema della persistenza delle informazioni durante la 
navigazione è una delle questioni su cui ferve il dibattito tra i Pro e i 
Contro AJAX. 

In realtà ci sono validi sistemi per risolverlo, tra questi: 

• l'uso di frames nascoste 

• l'uso dei cookies 

frames nascoste 

Forse il sistema migliore per garantire la persistenza delle informazioni 
durante la navigazione dell'applicazione è costituito dall'uso di frames 
nascoste, si tratta di incapsulare la pagina che ospita il codice AJAX in 
unframesetdeltipo: 

<html> 
<head> 

<title>ApplicazioneAJAX</title> 
</head> 

<frameset rows="0,*" framespacing=" 0" frameborder="0"> 

<frame src=" hidden.html" name="hidden" noresize/> 



<frame src=" applicazioneAJAX.html" name="main"/> 




come potete notare dall'attributo rows di <frameset> la prima frame sarà 
di altezza 0 e quindi invisibile. 
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Nel file della pagina invisibile, hidden.html, potremo inserire delle variabili 
a livello globale in uno script come : 

<script language- 1 javascript" type=" text/javascript" > 

var search = " sss" ; 
</script> 

dal codice della pagina visibile è possibile leggere e scrivere questa va- 
riabile con: 



varvalue = top.hidden .search; //lettura 
top.hidden .search = value; //scrittura 

In questo modo la navigazione avverrà tutta all'interno del trame main 
e qualsiasi pagina che vi si trova sarà in grado di accedere alle variabi- 
li del trame hidden. 

Il vantaggio di questa tecnica è che non è legata ai cookies (che po- 
trebbero essere disabilitati dall'utente). 
Lo svantaggio, per contro, è che non mette al riparo dal Refresh completo 
della pagina effettuato intenzionalmente o meno. 

) 

l cookies 

Un altro sistema per garantire la persistenza è quello di usare i cookies 
ovvero le informazioni residenti in maniera più o meno temporanea nel 
computer dell'utente. 

I cookies sono accessibili a javascript attraverso la proprietà docu- 
ment.cookie per gestire lettura è scrittura dei cookies si può usare del 
codice come: 



var Cookies = new Objectf); 

Cookies.get = function (name.defaultValue) { 

var nameEQ = name + " =" ; 

var ca = document.cookie.splitC; 1 ); 
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for(vari=0;i < ca.length;i++) { 
vare = ca[i]; 

while (c.charAt(0)==' ') c = c.substring(l,c.length); 
if (c.indexOf(nameEQ) == 0) { 

varckValue=c.substring(narneEQ.Iength,c.length); 

if(ckValue!=") return ckValue; 

} 

} 

return defaultValue; 



Cookies.set = function (name.value) { 
varexpires = ""; 
vardays = arguments[2]; 
var path = (arguments[3])?arguments[3]:"/"; 
if(days){ 

if(!isNaN(new Number(days))) { 
var date = new Date(); 

date.setTìme(date.getTìme()+(days*24*60*60*1000)); 
expires = " ; expires=" +date.toGMTString(); 

} 

} 

var setValue = name+" =" +value+expires+" ; path=" + path; 
document.cookie = setValue; 



Cookies.remove = function (name){ 
Cookies.set(name," ",-1); 




in questo modo si hanno a disposizione le funzioni: 

• Cookies.get - per leggere un valore dai cookies 

• Cookies.set - per impostare un cookie 
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• Cookies.remove - per cancellare un cookie 

Nella nostra applicazione AJAX dovremo prevedere una funzione che si 
occupa del salvataggio dello stato ad ogni richiesta ed una che si occupa 
di ripristinare lo stato precedente a ogni reload, come ad esempio: 

function recordlnput(){ 

var inputs = [" search" ," field" ]; 
for(var i=0;i<inputs.length;i++){ 

Cookies.set(inputs[i],document.getElementByld(inputs[i]).value); 

} 

} 

function reloadlnputO { 

var inputs = [" search" ," field" ]; 

for(var i =0;i <inputs.length;i++){ .3 
document.getElementByld(inputs[i]).value = Cookies.get(inputs[i],"); 

} 1 
if(Cookies.get(" search" ,")!=") sendRequestQ; _Ez 

} 

L'uso dei cookies per la persistenza ha come vantaggi : 

• non richiede layout particolari come le frames 

• può essere impostata anche una persistenza che va oltre la sessione 

• resiste al refresh della pagina 

L'aspetto negativo invece è solo uno, ma molto importante : se l'uten- 
te disabilita i cookies addio persistenza. 
In generale comunque la persistenza non rappresenta poi quel proble- 
ma che si vuole fare credere (anche perché spesso di usa AJAX come com- 
plemento a tecniche tradizionali); tuttavia in casi estremi, dove si vuo- 
le essere sicuri al 100% , nulla vieta di ricorrere a tutte e due le tecniche 
trame e cookies, in questo caso si avrà una doppia registrazione e un dop- 
pio controllo (cookies e frame) 
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5.4NOSCRIPT 

Un altro problema potrebbe essere il caso in cui l'utente abbia disabi- 
litato gli script del browser, la soluzione in questi casi è avvertire l'u- 
tente del problema inserendo nella pagina unTAG <NOSCRIPT>, come 
ad esempio: 

<NOSCRIPT> 

<table width="100%" cellpadding=" 0" cellspacing="0"> 
<tr> 

<td align=" center" > 



<tr> 

<td> 

<img src=" gifs/warning.gif" border=" 0" align= 

" absmiddle" alt=""> 

</td> 

<td style=" font:bold 14px arial;color:red" > 
Attenzione! il tuo browser ha disabilitato gli script. <br/> 

L'applicazione funziona solo con gli script abilitati. 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</NOSCRIPT> 

Il contenuto delTAG resta invisibile nel caso di scripts abilitati mentre av- 
verte l'utente in caso contrario. 



5.5 ALTRI MODI DI APPROCCIO 
AD AJAX - ASP.NET AJAX 

Come abbiamo detto all'inizio di questo libro un po' tutte le " M ajor" del 
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software(come IBM , Sun e M icrosoft), che talvolta oltre sviluppare lin- 
guaggi di programmazione producono anche ambienti di sviluppo, si stan- 
no muovendo intorno al fenomeno AJAX cercando di integrare nei va- 
ri IDE soluzioni per gestire AJAX. 

Emblematica in questo senso è la strada che ha scelto M icrosoft con il 
nuovo FrameworkASP.NET AJAX ( http://ajax.asp.net ). 
In pratica questa soluzione aggiunge altri WebControis a quelli dispo- 
nibili: 

• che caricano nella pagina ASP.NET le librerie Javascript necessarie 

• forniscono un'interfaccia per la gestione di timer, pannello di carica- 
mento ecc.. 

Oltre ai nuovi controlli abbiamo poi delle librerie lato client che "tra- 
ducono" la risposta del server in oggetti Javascript in maniera trasparente 
eliminando la necessità di usare XM L. 
Il lato server viene gestito con un Web Service come questo (l'esempio 
è ripreso dal sito sopra citato): 

<%@ WebService 
Class=" Samples.AspNet.HelloWorldService" %> 
using System; 
using System.Web; 
using System.Web.Services; 
using System.Web.Services.ProtocoIs; 
using M icrosoft.Web. Script. Services; 

namespace Samples.AspNet { 

[WebService(Namespace = " http://tempuri.org/" )] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfilel_l)] 
[ScriptService] 

public class HelloWorldService : System. Web.Services.WebService { 
[WebMethod] 



Language="C#" 
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public string HelloWorld(String query) 
{ 

string inputString = Server.HtmlEncode(query); 

if(! String. IsNullOrEmpty(inputString)) 

{ 

return String. Format)" Hello, you queried for {0} The " 
+ " current time is {1}" , inputString, DateTime.Now); 

} 

else 
< 



} 

} 

} 



Lato client invece il codice di gestione viene inserito in una pagina 
ASP.NET: 

<%@ PageLanguage="C#' Title=" ASP.NET AJAX Script Walkthrough" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " 
" http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd" > 
<html xmlns=" http://www.w3.org/1999/xhtml" > 
<head id=" Headl" runat=" server" > 
<title=" ASP.NET AJAX Script Walkthrough" /> 
<style type=" text/css" > 
body {font: llptTrebuchet MS; 
font-color: «00000; 



text-align: center } 
.text {font: 8ptTrebuchetMS} 
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</head> 
<body> 

<form id=" Formi" runat=" server" > 
<asp:ScriptM anager runat=" server" ID=" scriptM anager" > 
<Services> 

<asp:ServiceReference path=" ./HelloWorldService.asmx" /> 
</Services> 
</asp:ScriptManager> 
<div> 
Search for 

<input id=" SearchKey" type=" text" /> 
<input id=" SearchButton" type=" butteri" value=" Search" 
onclick=" DoSearchO" /> 
</div> 
</form> 

<hr style=" width: 300px" /> 
<div> 

<span id=" Results" ></span> 
</div> 

<script type=" text/javascript" > 
function DoSearchO 
{ 

var SrchElem = document.getElementByld(" SearchKey" ); 
Samples.AspNet.HelloWorldService.HelloWorld(SrchElem.value, 

OnRequestComplete); 

} 

function OnRequestComplete(result) 
{ 

var RsltElem = document.getElementByld(" Results" ); 
RsltElem.innerHTM L = result; 

} 

</script> 
</body> 
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Come possiamo vedere nella funzione javascript il metodo del Web Ser- 
vice è stato mappato, in maniera trasparente, su un oggetto javascript. 
Esempi di questo approccio naturalmente possono trovarsi in tutti ì lin- 
guaggi. Beh ... che dire? 

Non c'è dubbio che queste soluzioni funzionino ... a mio modesto pa- 
rere tuttavia impararsi degli standard come XM LHttpRequest, DOM e XPath 
richiede più o meno lo stesso tempo che imparare queste API, con il 
vantaggio che, una volta che abbiamo capito il meccanismo, siamo li- 
beri di implementare le soluzioni AJAX con il linguaggio lato server che 
preferiamo e addirittura possiamo costruirci delle API tutte nostre da 
riutilizzare nei progetti. 



5.6 J SON IL "CUGINO" EH AJAX 

Non possiamo parlare di AJAX senza fare nemmeno un cenno ad una 
tecnica molto simile e, per alcuni versi intercambiabile: J SON. 
JSON è l'acronimo diJavaScriptObject Notation ed è un formato di in- 
terscambio di dati basato su un particolare modo di scrivere gli ogget- 
ti. Un oggetto in javascript può essere definito in forma estesa come in: 



var myObject = new ObjectQ; 
myObject.width = 100; 
myObject. height = 20; 




oppure in forma contratta, come in: 



var myObject = {' width" :100," height" :20," name" :" ABC" } 
La stessa cosa vale per gli Array che si possono definire come: 
var myArray = new Array)); 
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myArray[l]= "Pera"; 
myArray[2]= " Banana"; 

o anche come: 

var myArray = ["Mela" ," Pera" ," Banana" ]; 

Le notazioni contratte si possono anche combinare, per cui un oggetto 
che ha una proprietà di tipo Array, che con notazione estesa si sarebbe 
espresso: 

var myObject = new ObjectQ; 
myObjectwidth = 100; 
myObject.height = 20; 
myObject.frutti = new ArrayO; 

myObject.frutti[0]= "Mela"; 

myObject.frutti[l]= "Pera"; 

myObject.frutti[2]= " Banana" ; 
con notazione contratta può essere anche espresso come: 
var myObject = 

{' width" :100," height" :20," frutti" ;[" M eia" ," Pera" ," Banana" ]} 

Quindi possiamo avere infinite strutture e sottostrutture capaci di rap- 
presentare una grande varietà di dati. A questo si aggiunga che java- 
script è dotato del metodo globale eval che consente di interpretare 
una qualsiasi stringa come codice javascript, pertanto scrivere: 

var myObject = 

{' width" :100," height" :20," frutti" :[" M eia" ," Pera" ," Banana" ]} 

o scrivere: 
eval('var myObject 
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è la stessa cosa, tanto che potremmo poi invocare proprietà e metodi con 
la solita sintassi, come: 

alert (myObject.width); 

Se torniamo un attimo a quello che abbiamo visto AJAX vediamo come 
una volta che recuperati i dati dal server in formato XM L questi dove- 
vano poi essere letti con il DOM e XPath per essere trasformati in HTM L. 
Bene, l'idea di JSON è : perché il server invece di inviare i dati in XM L non 
li manda direttamente in forma di stringa che Javascript possa inter- 
pretare come oggetto, come Array ecc.. ? 
Ed infatti qui sta la differenza tra le due tecniche : l'uso di XM L , in AJAX, 
e l'uso della notazione di Javascript, in JSON. 

AJAX vs JSON 

JSON in confronto ad AJAX ha vantaggi e svantaggi. 
I vantaggi di JSON sono: 

• con JSON il flusso dei dati è più leggero perché la struttura a TAG di 
XM L è più prolissa (anche se si può ridurre utilizzando, quando pos- 
sibile gli attributi anziché gli elementi) 

• con JSON si elimina la fase di parsing dei dati, basta solo XM LHttpRequest 
per il trasporto 

AJAX invece ha dalla sua: 

• i dati sono in un formato standard come XM L, oggi li utilizziamo per 
un applicazione Web, domani li potremmo utilizzare comeWeb Ser- 
vice o da un'applicazione Desktop senza toccare il lato server 

• il flusso XM L in AJAX potrebbe anche essere bidirezionale, cioè non 
solo il client che riceve XM L dal server, ma anche il server può ricevere 
XM L dal client (e i linguaggi lato server sono certo più attrezzati per 
interpretare l'XM L che una stringa di Javascript) 

• il test e debug sul server è più facile analizzando flussi XM L rispetto 
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ad una stringa di javascript. 
• il flusso XM L oltre che analizzato e gestito con il DOM potrebbe es- 
sere anche direttamente trasformato con XSLT 

In conclusione potremmo dire che sia AJAX cheJSON sono due ottime 
tecniche, l'ideale sarebbe apprenderle entrambe per poi usare quella 
che si adatta di più alla situazione specifica. 
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AJAXONTHEROAD 

Dopo i primi approcci con la tecnologia AJAX, che abbiamo visto nel 
capitolo precedente è giunto il momento di vedere qualche esempio 
pratico di applicazione della tecnica a varie situazioni di "vita reale" . 
In primo luogo c'è da dire che con AJAX si possono sia sviluppare ap- 
plicazioni complete che piccole applets (il termine naturalmente non ha 
niente a che vedere con le applet Java) di complemento ad applicazio- 
ni tradizionali. 

Per applicazioni di complemento si intendono quelle "utility" che sem- 
plificano la vita all'utente del sito ma non sono essenziali per il suo uti- 
lizzo. 

Come illustreremo meglio nel successivo capitolo, per i siti cosiddetti 
"pubblici" (cioè senza autenticazione utente) è preferibile utilizzare 
AJAX come supporto aggiuntivo alle procedure lato server. 
Vediamo quindi un esempio di questa tecnica applicato al carrello di 
un sito Web di E-Commerce. 

& 

6.1 UN CARRELLO INTERATTIVO ~ 

In fase di ordine da parte del cliente normalmente si trova, nel carrello, 
una Form che consente di modificare le quantità di prodotto da ordinare. 
Ora, è chiaro che in questa fase l'utente potrebbe inserire un valore cor- 
rispondente ad una quantità superiore a quella presente in magazzi- 
no. 

La procedura, normalmente, deve controllare, in fase di acquisizione 
della richiesta (e quindi dopo il Post della Form) le disponibilità di ma- 
gazzino e segnalare, di ritorno, l'eventuale errore. 
Con AJAX ci proponiamo invece di segnalare l'eventuale superamento 
della quantità massima disponibile prima ancora che l'utente invìi il Po- 
st al server. 

Per l'esempio proposto, non volendoci legare a nessuna particolare tec- 
nologia lato server abbiamo estratto un file XM L con i dati presi dalla ta- 
bella Products del database di esempio fornito da Microsoft con SQL 
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Server, Northwind. 

I nostri dati quindi sono su un file XM L come questo: 



<root> 

<Products ProductlD=" 1" ProductName="Chai" QuantityPerUnit=" 10 boxes 
x 20 bags" UnitPrice=" 18" UnitslnStock=" 5" /> 

<Products ProductlD=" 2" ProductName="Chang" QuantityPerUnit=" 24 - 12 
ozbottles" UnitPrice=" 19" UnrtslnStock=" 4" /> 

<Products PraductlD=" 3" ProductName="Aniseed Syrup" 

QuantityPerUnit=" 12 - 550 mi bottles" UnitPrice=" 10" UnitslnStock=" 12"/> 



QuantityPerUnit=" 48 - 6 oz jars" UnitPrice=" 22" UnitslnStock=" 3"/> 

</root> 

Nel file abbiamo una serie di elementi <Products> che rappresentano 
i prodotti, ognuno dei quali ha, come attributi: 

• ProductID- ID del prodotto 

• ProductName- Nome del prodotto 

• QuantityPerUnit - Quantità per unità 

• UnitPrice- Prezzo per unità 

• UnitsInStock - Disponibilità di magazzino 



Naturalmente, in un caso reale i dati e la risposta del server saranno 
generati dalla procedura (ASP.NET, PHP, JSP ecc.. ) di e-commerce, a 
noi interessa focalizzarci sul meccanismo lato client. 
Quindi andremo a scrivere un file HTM L con lo pseudo-codice di un ipo- 
tetico carrello con i prodotti corrispondenti ai dati contenuti nel file XM L 
che abbiamo sul server. 

La porzione di codice HTM L in questione sarà pressappoco così: 



<div class=" title" >Ordine</div> 
<form> 
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<tr> 

<th>Codice</th> 
<th>Nome articolo</th> 
<th>Unità per confezione</th> 
<th>Prezzo per Unità</th> 
<th colspan=" 2" >Quantità</th> 
</tr> 
<tr> 

<td>l</td> 

<td>Chai</td> 

<td>10 boxes x 20 bags</td> 

<td align="right">18</td> 

<td align=" right" xinput type=" text" class=" qta" id=" prodottol" 

value=" 3" ></td> 

<td id=" alerti" ></td> 

</tr> 

<tr> 

<td>2</td> 
<td>Chang</td> 
<td>24 - 12 oz bottles</td> 
<td align=" right" >19</td> 

<td align=" right" xinput type=" text" class=" qta" id=" prodotto2" 

value=" 2" ></td> 

<td id="alert2"x/td> 

</tr> 

<tr> 

<td>3</td> 

<td>Aniseed Syrup</td> 
<td>12 - 550 mi bottles</td> 
<td align=" right" >10</td> 

<td align=" right" xinput type=" text" class=" qta" id="prodotto3" 

value=" 1" ></td> 

<td id="alert3"x/td> 



I libri di ioPROGRAMMo/Programmare con Ajax 



143 



PROGRAMMARE CON 

AJAX 



AJAX on the road 



Capitolo 6 



</tr> 
<tr> 

<td>4</td> 

<td >Chef Anton's Cajun Seasoning</td> 

<td>48-6ozjars</td> 

<td align=" rrght" >22</td> 

<td align=" right" xinput type="text" class=" qta" id=" prodotto4" 

value="5"x/td> 

<td id="alert4"></td> 
</tr> 



<td colspan="6" align=" right" > 

<input type=" submit" class=" submit" value=" Invia" > 

</td> 

</tr> 

</table> 

</form> 

E il risultato nel browser sarà quello visibile in figura 8. 
figura 8 - La forni nel carrello (lmmagini\8.psd) 

Nella struttura HTM L possiamo notare come : 

• in ogni riga è presente una casella di testo per definire la quantità con 
ID corrispondente alla parola " prodotto" seguita dall'ID del prodot- 
to corrispondente. 

• a lato della casella di testo c'è una cella vuota con ID corrisponden- 
te alla parola "alert" seguita dall'ID del prodotto corrispondente. 

Inseriamo quindi, nel codice della pagina HTM L, il riferimento alla li- 
breria di funzioni AJAX e XM L di cui abbiamo parlato nel capitolo pre- 
cedente, jsXM L: 

<script src=" jsXM L.js" type=" text/javascript" ></script> 
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ed impostiamo una funzione che controlla la disponibilità del prodotto 
esaminando il file XM L di dati presente sul server (che avremo chiama- 
to carrello.xml): 

function controllaDisponibilita(inputBox){ 
//controlla se il valore è un numero 
var value = new Number(inputBox.value); 
if (isNaN(value)) { 

alerti" Il valore non è un numero valido" ); 

inputBox.value=0; 

return 

} 

var currentlD = inputBox.id.replace(" prodotto" ," " ); 
//Sub funzione di callback su ricevimento dati 

var dataArrive = function(strXM L){ .3 
//creazione del XM LDocument 
var doc = jsXM L.parseXM LDocument(strXM L); 
//individuazione del nodo prodotto 
var nodoProdotto = 
doc.selectSingleNode("//Products[@ProductlD= l " + currentlD + "']"); 
//recupero del valore 

var unitsInStock = nodoProdotto.getAttribute(" UnitsInStock" ); 
//cella messaggio 

varalertCell = document.getElementByld("alert" + currentlD); 

//confronto valori 

if (unitsInStock < value) { 

//se il valore è maggiore al max viene visualizzato 

il messaggio 

a I ertCel I . i n n erHTM L= '<span style=" colorirai" >' + 
la quantità impostata è superiore al valore massimo di ' + 
unitsInStock + '</span>'; 

} 

else { 
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//se il valore è corretto viene cancellato un eventuale 
//messaggio precedente 
alertCell.innerHTM L= "; 

} 

} 

jsXM L.sendAsyncGetf" carrello. xml" ," " .dataArrive) 

} 

Questa funzione richiede come parametro l'elemento <input> HTML 
che contiene il valore della quantità ed effettua le seguenti operazioni: 

• In primo luogo esamina se il valore della casella è un numero e, in ca- 
so contrario, avvisa l'utente. 

• Poi ricava l'ID del prodotto corrente dall'id dell'elemento <input> 
che, come abbiamo detto, rispetta la convenzione di denominazione 
prodotto{n}dove {n}è l'id del prodotto. 

• Quindi imposta una sotto-funzione, chiamata dataArrive, che verrà ri- 
chiamata al ricevimento del file XM L da parte del server e recupera 
il nodo del prodotto, legge il valore della quantità di merce in ma- 
gazzino, lo confronta con quello impostato dall'utente e, eventualmente, 
inserisce un messaggio di errore nella cella adiacente. 

• Da ultimo c'è la chiamata vera e propria della funzione contenuta 
nella libreria jsXM L sendAsyncGet che si occupa di scaricare in mo- 
do asincrono i dati XM L dal server e passarli alla sotto-funzione da- 
taArrive in precedenza esaminata. 

Non resta a questo punto che "agganciare" la funzione controllaDi- 
sponibilita ad un evento, scegliamo di collegarla all'evento onblur (quan- 
do l'utente esce dalla casella) di ogni casella che contiene le quantità, 
in questo modo: 

<input onblur=" controllaDisponibilita(this)" type=" text" id=" prodottol" 

value=" 3" > 



Notiamo che come parametro viene passato this ovvero il controllo cor- 
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rente. 

In questo modo quando l'utente sceglie un valore superiore alla quan- 
tità massima verrà visualizzato il messaggio di cui in figura 9. 
figura 9 - Il messaggio di errore in tempo reale (lmmagini\9.psd) 

Naturalmente questo è solo un esempio che non prende in considera- 
zione il lato server, il file XM L sul server infatti nel nostro caso è stati- 
co, ad esso va sostituita una pagina dinamica che colloquia con il da- 
tabase, vediamo come potrebbe essere inASP.NET. 



6.2 LATO SERVER 

La pagina di controllo ha semplicemente ruolo di effettuare la query al 
database e restituire i risultati in formato XM L, per far questo non c'è 
bisogno di creare una pagina ASPX, è sufficiente un Handler della richiesta 
in formato .ashx. 

Il nostro Handler riceve come parametro l'id del prodotto da controlla- 
re, inserito nella Uri, effettua una query a SQL SERVER utilizzando la 
clausola FOR XM L e restituisce i risultati come XM L. 
Ecco tutto il codice necessario del nostro file checkCarrello.ashx : 

■m 

<%@ WebHandler Language="VB" Class=" checkCarrello" %> 
Imports System 
Imports System.Web 
Imports System. Data 
Imports System. Data. SqlClient 

Public Class checkCarrello : Implements IHttpHandler 

Private ReadOnly Property IDProdottoQ As Integer 
Get 

Return My.Request.QueryStringl" id" ) 
End Get 
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Public Function QueryXmlQ As String 
Dim conn As New SqlConnection(" Data Source=M IOSERVER;lnitial 

Catalog=Northwind;Persist Security lnfo=True" ) 
Dim strSQL As String = " SELECT * FROM Products Where ProductlD=@ID 

FOR XML AUTO" 

Dim cmd As New SqlCommand(strSQL, conn) 

Dim param As SqlParameter = cmd.CreateParameter() 

param.ParameterName = " @ID" 

param.Value = IDProdotto 

cmd.Parameters.Add(param) 

Dim strResultAs String = " " 

conn.Openf) 

Dim readerAs SqlDataReader = 

cmd.ExecuteReader(CommandBehavior.CloseConnection) 
While reader.Read 

strResult &= reader.GetString(O) 
End While 
reader.CloseO 
Return strResult 
End Function 

Public Sub ProcessRequestfByVal contextAs HttpContext) Implements 

IHttpHandler.ProcessRequest 

context.Response.ContentType = "text/xml" 
With context.Response.Output 
.WriteLine(»<root>'') 



.Write(QueryXml) 
.WriteLine("</root>") 
End With 
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Public ReadOnly Property IsReusablefl As Boolean Implements 

IHttpHandler.IsReusable 

Get 

Return False 
End Get 
End Property 

End Class 

Il testo XM Ldi risposta prodotto da una Uri come: checkcarrello.ashx?id=l 
sarà: 

<root> 

<Products ProductlD=" 1" ProductName="Chai" SupplierlD=" 1" 

CategorylD=" 1" QuantityPerUnit=" 10 boxes x 20 bags" 
UnitPrice=" 18.0000" UnitslnStock="39" UnitsOnOrder="0" 
ReorderLevel=" 10" Discontinued="0'7> 

</root> 

Naturalmente anche in questo caso si tratta di un esempio puramente 
esplicativo: nessuno mai si sognerebbe di mettere la stringa di connes- 
sione direttamente nel codice (c'è per questo il fileWeb.config) e sa- 
rebbe anche bene separare le query SQL o nella configurazione o in fi- 
le distinti; facciamo così solo per brevità. 
A questo punto l'unica modifica al codice AJAX sarà quella di cambia- 
re la uri di risposta del server, se prima era : 

jsXM L.sendAsyncGetf" carrello. xml" ," " ,dataArrive) 

e puntava al file statico, adesso sarà invece : 

jsXM L.sendAsyncGet(" checkCarrello.ashx?id=" + currentlD," " .dataArrive) 
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Dove currentlD, lo ricordiamo, era il codice del prodotto incluso nell'id 
dell'elemento <input> 
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CONSIDERAZIONI 
FINALI E RIFERIMENTI 



7.1 AJAX DOVE, , 
QUANDO E PERCHE 

Solitamente si usa affrontare l'argomento dei vantaggi e degli 
svantaggi di una tecnologia nel primo capitolo del libro. 
Con AJAX abbiamo preferito spostare il tema in coda all'argo- 
mentazione perché su questa tecnica c'è ancora, crediamo, poca 
chiarezza e quindi sembrava più opportuno che prima venisse il- 
lustrata. 



7.2 IN QUALI APPLICAZIONI 8 
USARE AJAX "1 

AJAX è senza dubbio una tecnica affascinante, in grado di portare 
sul Web un'esperienza di usabilità e di interfaccia utente degna 
( e a volte superiore) delle applicazioni Desktop. 
Tuttavia non è sempre detto che sia la soluzione migliore. 
AJAX è infatti fortemente legata al client in quanto basata su Ja- 
vascript, DOM HTM L e XM L, XPath e XM LHttpRequest, basta che 
manchi una di queste condizioni e l'applicazione non funzionerebbe. 
È vero che la generalità dei browser oggi in circolazione è capa- 
ce di gestire queste tecnologie, tuttavia, mentre lato serversiamo 
in grado di controllare pienamente i requisiti (è chiaro che un'ap- 
plicazione per .NET 2.0 non funzionerà se nella macchina è in- 
stallato solo .N ET 1.1 ecc.. ), lato client la situazione è molto più 
"aleatoria". 

In generale, come regola " prudenziale" è consigliabile adottare 
AJAX: 

• per applicazioni in aree non pubbliche del sito, come le sezio- 
ni di amministrazione, dove possiamo indirizzare gli utenti ver- 
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so l'uso di alcuni browser o l'abilitazione di alcune funzioni 

• per le Intranet/Extranet, per le stesse ragioni di cui sopra 

• per funzioni di "complemento", utilità che magari velocizza- 
no il lavoro dell'utente ma non sono essenziali al funziona- 
mento dell'applicazione 

7.3 A| AX E I MOTORI DI RICERCA 

Un'altra considerazione che porta a escludere l'uso di AJAX per l'ho- 
mepage del proprio sito è data dall'impossibilità per i motori di ri- 
cerca di indicizzarne il contenuto, con AJAX (ma il discorso vale an- 
che in generale pertutto I' HTM L generato lato client e non scrit- 
to direttamente sulla pagina) il contenuto viene creato attraver- 
so Javascript, ma i robots dei motori di ricerca non eseguono gli 
script, per cui non riconoscerebbero il testo. 
Quindi, se proprio non potete fare a meno di usare AJAX nel- 
l'homepage del vostro sito, non usatelo per mostrare informa- 
zioni chiave per la vostra attività. 

7.4ITOOLS 

Di tools e librerie per AJAX ne esistono un po' per tutti i linguag- 
gi di programmazione e gli ambienti di sviluppo, solo per citarne 
alcuni: 

• Google Web Toolkit - http://code.google.com/webtoolkit - 
che traduce in AJAX applicazioni scritte in Java 

• Eclipse AJAX Toolkit Framework - http://www.eclipse.org/atf 
- che integra tool dì sviluppo AJAX nel popolare IDE 

• AJAXASP.NET- http://ajax.asp.net- già citato in prece- 
denza, che rappresenta la proposta di M icrosoft per l'integra- 
zione di AJAX con ASP.NET e Visual Studio 

Comunque si può tranquillamente affermare che, una volta apprese 
le basi concettuali della tecnica, l'unico tool che realmente è uti- 
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le è un buon editor HTML (come UltraEdito Homesite) perii lato 
client e l'ambiente di sviluppo comunemente usato per il lato ser- 
ver. 



7.5 RIFERIMENTI 

Alcuni link utili sono : 

http://www.w3schools.com - perAJAX e le altre tecnologie Web 
http://www.topxml.com - con interessanti e completi tutorial sul- 
l'argomento 

http://sourceforge.net/projects/sarissa - la popolare libreria per 
la gestione di XM L con Javascript 

http://developer.mozilla.Org/en/docs/AJAX:Getting_Started - un 
tutorial firmato Mozilla 

http://msdn.microsoft.com/library- la famosa library di Microsoft 
che nella sezione Web offre numerosi e utili riferimenti per java- 
script e HTML 

http://www.adaptivepath.com/publications/essays/archi- 
ves/000385.php - l'articolo di Jesse James Garrett, colui che ha 
coniato il termine AJAX 

http://www.xml.com - altro sito con interessanti articoli su XM L 
eAJAX 

http://www.w3.org - il sito del W3C che contiene tutti i riferi- 
menti agli standard di cui abbiamo parlato 
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